initial commit

src/assets/css/default.css

@@ -882,6 +882,9 @@ a {
 .pl-125 {
 	padding-left: 125px;
 }
+.pl-150 {
+	padding-left: 150px;
+}
 /*-- Padding right --*/
 
 .pr-0 {

src/assets/css/main.css

@@ -142,7 +142,6 @@ p {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid #4687ba;
   padding: 0 30px;
   font-size: 15px;
   line-height: 45px;
@@ -156,11 +155,18 @@ p {
   -o-transition: all 0.4s ease-out 0s;
   transition: all 0.4s ease-out 0s;
   background-color: #4687ba;
+  border: 1px solid #4687ba;
+  /* transition: all linear 0.3s;
+  border: 1px solid #89216b;
+  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%); */
 }
 .main-btn:hover {
   background-color: #fff;
   color: #2b70fa;
   border-color: #2b70fa;
+  /* background-image: linear-gradient(90deg, #000 0%, #000 100%);
+  color: #fff;
+  border-color: #000; */
 }
 .main-btn.main-btn-2 {
   background-color: #fff;
@@ -183,6 +189,16 @@ p {
   letter-spacing: 2px;
   text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
+.generative-ai{
+  padding-left: 150px;
+}
+
+@media only screen and (max-width: 568px) {
+  .generative-ai{
+    padding-left: 50px;
+  }
+}
+
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-section-title .appie-title {
     font-size: 36px;
@@ -231,17 +247,17 @@ p {
     font-size: 15px;
   }
 }
-.appie-section-title .main-btn {
+/* .appie-section-title .main-btn {
   border-radius: 30px;
   border: 2px solid #e7eaef;
   background: #fff;
   color: #0e1133;
-}
-.appie-section-title .main-btn:hover {
+} */
+/* .appie-section-title .main-btn:hover {
   background: #ff3e66;
   color: #fff;
   border-color: #ff3e66;
-}
+} */
 .appie-section-title.appie-section-title-2 .appie-title {
   color: #fff;
 }
@@ -877,15 +893,15 @@ p {
   right: 0;
   z-index: 999;
 }
-.appie-header-area.appie-header-2-area .appie-btn-box .main-btn {
+/* .appie-header-area.appie-header-2-area .appie-btn-box .main-btn {
   background: #ff3e66;
   border-radius: 30px;
   border-color: #ff3e66;
-}
-.appie-header-area.appie-header-2-area .appie-btn-box .main-btn:hover {
+} */
+/* .appie-header-area.appie-header-2-area .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #ff3e66;
-}
+} */
 .appie-header-area.appie-header-3-area.appie-sticky.sticky {
   background: #0e1133;
 }
@@ -965,30 +981,30 @@ p {
 .header-nav-box.header-nav-box-3 .appie-btn-box .login-btn {
   color: #fff;
 }
-.header-nav-box.header-nav-box-3 .appie-btn-box .main-btn {
+/* .header-nav-box.header-nav-box-3 .appie-btn-box .main-btn {
   background: #ff6b58;
   border-color: #ff6b58;
-}
-.header-nav-box.header-nav-box-3 .appie-btn-box .main-btn:hover {
+} */
+/* .header-nav-box.header-nav-box-3 .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #ff6b58;
-}
+} */
 .header-nav-box.header-nav-box-3 .toggle-btn {
   color: #fff;
   font-size: 20px;
 }
-.header-nav-box.header-nav-box-3.header-nav-box-inner-page
+/* .header-nav-box.header-nav-box-3.header-nav-box-inner-page
   .appie-btn-box
   .main-btn {
   border-color: #fff;
   background: transparent;
-}
-.header-nav-box.header-nav-box-3.header-nav-box-inner-page
+} */
+/* .header-nav-box.header-nav-box-3.header-nav-box-inner-page
   .appie-btn-box
   .main-btn:hover {
   background: #fff;
   color: #2b70fa;
-}
+} */
 .header-nav-box.header-nav-box-5 .appie-header-main-menu ul > li > a {
   color: #fff;
 }
@@ -1004,14 +1020,14 @@ p {
 .header-nav-box.header-nav-box-5 .appie-btn-box .login-btn {
   color: #fff;
 }
-.header-nav-box.header-nav-box-5 .appie-btn-box .main-btn {
+/* .header-nav-box.header-nav-box-5 .appie-btn-box .main-btn {
   background: #f84a6e;
   border-color: #f84a6e;
-}
-.header-nav-box.header-nav-box-5 .appie-btn-box .main-btn:hover {
+} */
+/* .header-nav-box.header-nav-box-5 .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #f84a6e;
-}
+} */
 .header-nav-box.header-nav-box-5 .toggle-btn {
   color: #fff;
   font-size: 20px;
@@ -1019,14 +1035,14 @@ p {
 .header-nav-box.header-nav-4-box .appie-header-main-menu ul > li > a:hover {
   color: #801f82;
 }
-.header-nav-box.header-nav-4-box .appie-btn-box .main-btn {
+/* .header-nav-box.header-nav-4-box .appie-btn-box .main-btn {
   background: #801f82;
   border-color: #801f82;
-}
-.header-nav-box.header-nav-4-box .appie-btn-box .main-btn:hover {
+} */
+/* .header-nav-box.header-nav-4-box .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #801f82;
-}
+} */
 @media (max-width: 767px) {
   .header-nav-box.header-nav-4-box .appie-btn-box ul {
     margin-right: 10px;
@@ -1057,14 +1073,14 @@ p {
   background: #801f82;
   border-radius: 50%;
 }
-.header-nav-box.header-nav-box-6 .main-btn {
+/* .header-nav-box.header-nav-box-6 .main-btn {
   background: #9b2cfa;
   border-color: #9b2cfa;
-}
-.header-nav-box.header-nav-box-6 .main-btn:hover {
+} */
+/* .header-nav-box.header-nav-box-6 .main-btn:hover {
   background: transparent;
   color: #9b2cfa;
-}
+} */
 .header-nav-box.header-nav-box-6 .appie-header-main-menu ul > li > a:hover {
   color: #9b2cfa;
 }
@@ -1410,14 +1426,14 @@ p {
     top: 0;
   }
 }
-.appie-header-8-area .header-nav-box .appie-btn-box .main-btn {
+/* .appie-header-8-area .header-nav-box .appie-btn-box .main-btn {
   background: #db0f30;
   border-color: #db0f30;
-}
-.appie-header-8-area .header-nav-box .appie-btn-box .main-btn:hover {
+} */
+/* .appie-header-8-area .header-nav-box .appie-btn-box .main-btn:hover {
   background: #fff;
   color: #db0f30;
-}
+} */
 .appie-header-8-area .header-nav-box .appie-header-main-menu ul > li a:hover {
   color: #db0f30;
 }
@@ -1635,20 +1651,20 @@ p {
   i {
   border-color: rgba(255, 255, 255, 0.2);
 }
-.appie-hero-area.appie-hero-3-area.appie-hero-5-area
+/* .appie-hero-area.appie-hero-3-area.appie-hero-5-area
   .appie-hero-content
   .hero-btns
   .main-btn {
   border-color: rgba(255, 255, 255, 0.2);
   color: #fff;
-}
-.appie-hero-area.appie-hero-3-area.appie-hero-5-area
+} */
+/* .appie-hero-area.appie-hero-3-area.appie-hero-5-area
   .appie-hero-content
   .hero-btns
   .main-btn:hover {
   background: #f84a6e;
   color: #fff;
-}
+} */
 .appie-hero-area .hero-shape-1 {
   position: absolute;
   left: 0;
@@ -1900,7 +1916,7 @@ p {
     line-height: 50px;
   }
 }
-.appie-hero-content.appie-hero-content-4 a.main-btn {
+/* .appie-hero-content.appie-hero-content-4 a.main-btn {
   border: 2px solid #801f82;
   color: #801f82;
   background: #fff;
@@ -1908,11 +1924,11 @@ p {
   padding: 0 40px;
   font-size: 16px;
   margin-top: 40px;
-}
-.appie-hero-content.appie-hero-content-4 a.main-btn:hover {
+} */
+/* .appie-hero-content.appie-hero-content-4 a.main-btn:hover {
   background: #801f82;
   color: #fff;
-}
+} */
 .appie-hero-content.appie-hero-content-6 > span {
   color: #9b2cfa;
 }
@@ -1967,14 +1983,18 @@ p {
   border-color: #fff;
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2 {
-  /* background: #fff; */
   background-color: rgb(219, 237, 245);
   border-color: #fff;
+  /* color: #fff;
+  border-color:#89216b;
+  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%); */
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
   color: #fff;
+  /* background-image: linear-gradient(90deg, #000 0%, #000 100%);
+  border-color:#000; */
 }
 .appie-hero-content.appie-hero-content-6.appie-hero-content-7 .appie-title {
   color: #fff;
@@ -2027,7 +2047,7 @@ p {
   height: 500px;
   width: 500px;
   transform: translate(-50%, -50%);
-  background: #4687ba;
+  background: #dbedf5;
   border-radius: 50%;
   z-index: -1;
 }
@@ -2293,6 +2313,13 @@ p {
   }
 }
 
+.appie-blog-item{
+  background-color: #F1F8FF;
+  padding: 20px;
+  min-height: 350px;
+  border-radius: 10px
+}
+
 @media screen and (min-width: 688px) and (max-width: 1031px) {
   /* Your CSS styles for this viewport size */
   .appie-blog-item{
@@ -2369,7 +2396,7 @@ p {
     4.APPIE SERVOCE css 
 ===========================*/
 .appie-service-area {
-  background: #fbf4fe;
+  background: #fdfaf4;
   position: relative;
   background-position: 92% 100%;
   background-repeat: no-repeat;
@@ -2659,10 +2686,10 @@ p {
   border-radius: 21% 79% 58% 42% / 50% 46% 54% 50%;
 }
 
-.appie-services-6-area .appie-section-title .main-btn:hover {
+/* .appie-services-6-area .appie-section-title .main-btn:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
-}
+} */
 .appie-services-6-area .appie-single-service-2 a:hover {
   color: #9b2cfa;
 }
@@ -3100,6 +3127,11 @@ p {
   /* box-shadow: inset 0 0 15px 25px white; */
   box-shadow: 0 0 10px 20px #fff inset;
 }
+.withFadeEdge-light-purple{
+  border-radius: 10px 10px 10px 10px;
+  /* box-shadow: inset 0 0 15px 25px white; */
+  box-shadow: 0 0 5px 10px #fbf4fe inset;
+}
 /*===========================
     6.APPIE TRAFFICE css 
 ===========================*/
@@ -3129,7 +3161,7 @@ p {
 
 .appie-traffic-title {
   padding-right: 220px;
-  margin-bottom: 43px;
+  margin-bottom: 20px;
 }
 @media (max-width: 767px) {
   .appie-traffic-title {
@@ -3175,29 +3207,12 @@ p {
 }
 .appie-traffic-service {
   padding-left: 40px;
-  padding-right: 70px;
+  /* padding-right: 70px; */
 }
 .appie-traffic-service-two {
   padding-left: 40px;
 }
 
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-  .appie-traffic-service, .appie-traffic-service-two {
-    padding-right: 0;
-  }
-}
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  .appie-traffic-service {
-    margin-bottom: 30px;
-    padding-right: 50px;
-  }
-}
-@media (max-width: 767px) {
-  .appie-traffic-service {
-    margin-bottom: 30px;
-    padding-right: 0px;
-  }
-}
 .appie-traffic-service .icon, .appie-traffic-service-two .icon {
   position: absolute;
   left: 0;
@@ -3215,13 +3230,13 @@ p {
   box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
 }
 .appie-traffic-service .title, .appie-traffic-service-two title {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
   padding-bottom: 7px;
   text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
 }
 .appie-traffic-service p, .appie-traffic-service-two p {
-  font-size: 17px;
+  font-size: 16px;
   margin-top: 10px;
   /*margin-bottom: 2px;*/
 }
@@ -3315,10 +3330,10 @@ p {
 .traffic-btn a.main-btn i {
   padding-left: 6px;
 }
-.traffic-btn a.main-btn:hover {
+/* .traffic-btn a.main-btn:hover {
   background: #2b70fa;
   color: #fff;
-}
+} */
 
 /*===========================
     6.APPIE TRAFFICE css 
@@ -4929,6 +4944,7 @@ p {
   border-radius: 3px;
   left: 0;
   top: 4px;
+  object-fit: cover;
 }
 
 .popular-post h5 {
@@ -7239,17 +7255,17 @@ blockquote cite {
   font-weight: 700;
   margin-bottom: 8px;
 }
-.appie-download-3-box .content a.main-btn {
+/* .appie-download-3-box .content a.main-btn {
   background: #fff;
   color: #0e1133;
   border-color: #fff;
   margin-top: 33px;
-}
-.appie-download-3-box .content a.main-btn:hover {
+} */
+/* .appie-download-3-box .content a.main-btn:hover {
   background: #ff6b58;
   border-color: #ff6b58;
   color: #fff;
-}
+} */
 .appie-download-3-box .content a.main-btn i {
   padding-right: 6px;
 }
@@ -7263,18 +7279,18 @@ blockquote cite {
   color: #0e1133;
   border-color: #fff;
 }
-.appie-download-3-box.appie-download-6-box a.main-btn:hover {
+/* .appie-download-3-box.appie-download-6-box a.main-btn:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
-}
+} */
 .appie-download-3-box.appie-download-6-box a.main-btn.main-btn-2 {
   background: #9b2cfa;
   border-color: #9b2cfa;
 }
-.appie-download-3-box.appie-download-5-box a.main-btn:hover {
+/* .appie-download-3-box.appie-download-5-box a.main-btn:hover {
   background: #801f82;
   border-color: #801f82;
-}
+} */
 .appie-download-3-box.appie-download-5-box a.main-btn.main-btn-2 {
   background: #801f82;
   border-color: #801f82;

src/components/AboutText/AboutText.js

@@ -6,11 +6,12 @@ import Interactive from "../../assets/images/interactive.png";
 import Mobility from "../../assets/images/mobility-approach.png";
 import Privacy from "../../assets/images/privacy.png";
 import Seamless from "../../assets/images/seamless.png";
+import Security from "../../assets/images/security.png";
 
 function ServiceItem(props) {
   return (
     <div
-      className={`appie-single-service-2 appie-single-service-about item-${props.index} mt-30 wow animated fadeInUp`}
+      className={`mt-0 p-4 appie-single-service-2 appie-single-service-about item-${props.index} wow animated fadeInUp`}
       data-wow-duration="2000ms"
       data-wow-delay={`${props.delay}ms`}
       style={{ cursor: "default" }}
@@ -31,7 +32,7 @@ function AboutTextComponent() {
         <div className="row">
           <div className="row">
             {servicesContent?.map(({ id, ...item }) => (
-              <div className="col-lg-4 col-md-6">
+              <div className="col-lg-3 col-md-6">
                 <ServiceItem index={id} {...item} />
               </div>
             ))}
@@ -55,19 +56,27 @@ const servicesContent = [
   },
   {
     id: 2,
-    image: Approach,
+    image: Mobility,
     delay: 400,
     title: "Opportunity",
     description:
-      "We prioritize developing a strong opportunity mindset and teamwork.",
+      "We prioritize developing a strong opportunity mindset for our users and teamwork.",
   },
   {
     id: 3,
     image: Interactive,
     delay: 600,
-    title: "Online Safety",
+    title: "Modern",
     description:
-      "Stay up-to-date with WrenchBoard! We ensure healthy communication at all times.",
+        "We endeavor to improve our features to catch up to how we can best serve our users.",
+  },
+  {
+    id: 4,
+    image: Security,
+    delay: 600,
+    title: "Security & Safety",
+    description:
+      "Healthy communication and privacy are the foundation of all features now and in the future.",
   },
   // {
   //   id: 4,

src/components/AboutUs/HeaderAbout.js

@@ -3,6 +3,7 @@ import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
+import { Link } from 'react-router-dom';
 
 function HeaderAbout({ action }) {
     useEffect(() => {
@@ -18,9 +19,9 @@ function HeaderAbout({ action }) {
                         <div className="row align-items-center">
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="appie-logo-box">
-                                    <a href="/">
+                                    <Link to="/">
                                         <img src={logo} alt="" width="175px" height="38px" loading='eager' />
-                                    </a>
+                                    </Link>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">

src/components/AboutUs/HeroAbout.js

@@ -7,7 +7,7 @@ function HeroAbout() {
           <div className="row">
             <div className="col-lg-7">
               <div className="appie-about-top-title">
-                <h2 className="title">Our team is here to support you.</h2>
+                <h2 className="title">Plan and reward accomplishment with ease.</h2>
               </div>
             </div>
             <section className="appie-about-page-area">
@@ -20,10 +20,20 @@ function HeroAbout() {
                       We Empower Reward for Achievements
                       </h3>
                       <p>
-                                WrenchBoard prioritizes safety above all. Parents can set up family accounts to oversee their children's activities and earnings. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for both kids and their guardians.
-                                We believe that earning should go hand in hand with learning. As kids complete projects and earn, they also acquire essential life skills such as financial literacy, time management, and effective communication. WrenchBoard isn't just about making money; it's about fostering holistic growth.
-                                <p>Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a></p>
+                        WrenchBoard is the platform for planning and rewarding accomplishments for individuals and parents. Parents can set up family accounts to oversee their children's activities and earnings.
+                      </p>
+                      <p>
+                        At WrenchBoard, we believe in the power of motivating through rewards. As children complete projects, tasks, or chores and earn rewards, children also gain financial, time management, and valuable execution skills that enhance the joy of personal growth.
+                      </p>
+                      <p>
+                        WrenchBoard is more than just a platform for rewards; it fosters holistic growth in children, and WrenchBoard prioritizes safety above all. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for kids and their guardians.
+
+                                {/*WrenchBoard prioritizes safety above all. Parents can set up family accounts to oversee their children's activities and earnings. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for both kids and their guardians.*/}
+                                {/*We believe that earning should go hand in hand with learning. As kids complete projects and earn, they also acquire essential life skills such as financial literacy, time management, and effective communication. WrenchBoard isn't just about making money; it's about fostering holistic growth.*/}
+
+
                                 </p>
+                      <p>Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a></p>
                     </div>
                   </div>
                 </div>

src/components/AboutUs/ServicesAbout.js

@@ -4,11 +4,11 @@ import AboutTextComponent from '../AboutText/AboutText';
 function ServicesAbout() {
   return (
     <>
-      <section className="appie-services-2-area pt-90 pb-55" id="service">
+      <section className="appie-services-2-area pt-20" id="service">
         <div className="container">
           <div className="row align-items-end">
             <div className="col-12 col-lg-8">
-              <div className="appie-section-title">
+              <div className="appie-section-title pb-0">
                 <h3 className="appie-title">We’re driven by your values</h3>
                 {/* <p>{servicesContent.subTitle}</p> */}
               </div>

src/components/HomeOne/FooterHomeOne.js

@@ -16,19 +16,19 @@ function FooterHomeOne({ className }) {
                             <div className="footer-about-widget">
                                 <div className="logo">
                                     <a href="#">
-                                        <img src={logo} alt="WrenchBoard" loading='eager' width={300} height={65} />
+                                        <img src={logo} alt="WrenchBoard" loading='eager' width={175} height={38} />
                                     </a>
                                 </div>
                                 <p>
                                     {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                 </p>
-                                <a href="/service">
+                                <Link to="/service">
                                     Read More <i className="fal fa-arrow-right" />
-                                </a>
+                                </Link>
                                 <div className="social mt-30">
                                     <ul>
                                         <li>
-                                            <a href={site.facebook_link}>
+                                            <a to={site.facebook_link}>
                                                 <i className="fab fa-facebook-f" />
                                             </a>
                                         </li>
@@ -53,7 +53,7 @@ function FooterHomeOne({ className }) {
                                         <Link to="/service">Our Services</Link>
                                     </li>
                                     <li>
-                                        <a href="/use-cases">Use Cases</a>
+                                        <Link to="/use-cases">Use Cases</Link>
                                     </li>
                                     <li>
                                         <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
@@ -73,16 +73,16 @@ function FooterHomeOne({ className }) {
                                         <Link to="/contact">Contact</Link>
                                     </li>
                                     <li>
-                                        <a href="/faq">Faqs</a>
+                                        <Link to="/faq">Faqs</Link>
                                     </li>
                                     <li>
                                         <a href="https://blog.wrenchboard.com/resources/">Resources</a>
                                     </li>
                                     <li>
-                                        <a href="/privacy">Privacy Policy</a>
+                                        <Link to="/privacy">Privacy Policy</Link>
                                     </li>
                                     <li>
-                                        <a href="/terms">Terms of use</a>
+                                        <Link to="/terms">Terms of use</Link>
                                     </li>
                                 </ul>
                             </div>

src/components/HomeOne/HeroHomeOne.js

@@ -13,13 +13,14 @@ import SliderOne from '../../assets/images/home/top_sliders/slide_1.png'
 import SliderTwo from '../../assets/images/home/top_sliders/slide_2.png'
 import SliderThree from '../../assets/images/home/top_sliders/slide_3.png'
 import SliderFour from '../../assets/images/home/top_sliders/slide_4.png'
-// import SliderFive from '../../assets/images/home/top_sliders/slide_5.png'
+import SliderFive from '../../assets/images/home/top_sliders/slide_5.png'
+import SliderCenter from '../../assets/images/home/top_sliders/slide_33.png'
 
 
 function HeroHomeOne() {
 
   const sliders = [
-    SliderOne, SliderTwo, SliderThree, SliderFour
+    SliderOne, SliderTwo, SliderCenter, SliderThree, SliderFour, SliderFive
   ]
 
   return (

src/components/HomeOne/HomeOneHeader.js

@@ -3,6 +3,7 @@ import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
+import { Link } from 'react-router-dom';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
   var site = getConfig()[0];
@@ -16,9 +17,9 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
           <div className="row align-items-center">
             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
               <div className="appie-logo-box">
-                <a href="/">
+                <Link to="/">
                   <img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
-                </a>
+                </Link>
               </div>
             </div>
 

src/components/Service/ServiceSideMenu.js

@@ -5,6 +5,7 @@ import HomeIcon from '../../assets/images/icon/home-icon.ico'
 import UseCaseIcon from '../../assets/images/icon/use-case.ico'
 import PrivacyIcon from '../../assets/images/icon/privacy-policy.ico'
 import TermsIcon from '../../assets/images/icon/term-and-conditions.ico'
+import { Link } from 'react-router-dom';
 
 function ServiceSideMenu() {
     var site = getConfig()[0];
@@ -13,43 +14,43 @@ function ServiceSideMenu() {
             <div className="service-details-sidebar mr-50">
 
                 <div className="service-download-widget">
-                    <a href="/">
+                    <Link to="/">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={HomeIcon} alt='sidenav-icon' />
                         <span>Home</span>
-                    </a>
+                    </Link>
                 </div>
 
                 <div className="service-download-widget">
-                    <a href="/about-us">
+                    <Link to="/about-us">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={AboutIcon} alt='sidenav-icon' />
                         <span>About us</span>
-                    </a>
+                    </Link>
                 </div>
                 <div className="service-download-widget">
-                    <a href="/use-cases">
+                    <Link to="/use-cases">
                         {/* <i className="fal fa-file-pdf"></i> */}
                         <img src={UseCaseIcon} alt='sidenav-icon' />
                         <span>Use Cases</span>
-                    </a>
+                    </Link>
                 </div>
 
 
 
                 <div className="service-download-widget">
-                    <a href="/privacy">
+                    <Link to="/privacy">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={PrivacyIcon} alt='sidenav-icon' />
                         <span>Privacy Policy</span>
-                    </a>
+                    </Link>
                 </div>
                 <div className="service-download-widget">
-                    <a href="/terms">
+                    <Link to="/terms">
                         {/* <i className="fal fa-file-pdf"></i> */}
                         <img src={TermsIcon} alt='sidenav-icon' />
                         <span>Terms of use</span>
-                    </a>
+                    </Link>
                 </div>
 
                 <div className="service-category-widget">

src/components/lnd/LndParts/Design/Main.js

@@ -26,17 +26,23 @@ const Main = ({gredient}) => {
             }
             <div className="container">
                 <div className="row">
-                    <div className="col-lg-6">
+                    <div className="col-12">
                         <div className="w-100">
-                            <div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
-                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
+                            <div className="p-0 appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Reward Accomplishments</div></h3>
                                 <p className=''>
-                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
+                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards.
                                 </p>
                             </div>
-                            <div className="row">
+                            <div className="appie-traffic-title section_title my-5" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                                <h3 className='title text-center'>Assign Faster with</h3>
+                                <h3 className='w-100 title text-center d-flex justify-content-center flex-nowrap'>
+                                    <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
+                                </h3>
+                            </div>
+                            <div className="row my-4">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
-                                <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                <div className="col-12 col-md-6 mb-10 d-flex justify-content-center" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
                                         className={`appie-traffic-service features appie-modern-design`}
                                     >
@@ -44,51 +50,14 @@ const Main = ({gredient}) => {
                                         <i className={icon} />
                                         </div>
                                         <h5 className="title">{header}</h5>
-                                        <p>{paragraph}</p>
+                                        {/* <p>{paragraph}</p> */}
                                     </div>
                                 </div>
                             ))}
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-6">
-                        {/* <div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
-                            <div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
-                                <div className="left_img position-relative">
-                                    <img 
-                                        className="moving_position_animatin position-relative" 
-                                        src={ localImgLoad(`images/home/${activeImg}.jpg`)} 
-                                        alt="image" 
-                                        width='332px'
-                                        height='auto'
-                                    />
-                                </div>
-                                <div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
-                                    <div className='d-flex flex-column justify-content-start align-items-center'>
-                                        <img 
-                                            className="moving_position_animatin right_img_two" 
-                                            src={
-                                                activeImg == 'reward-goals' ? localImgLoad(`images/home/box-reward.png`)
-                                                :
-                                                activeImg == 'assign-chores' ? localImgLoad(`images/home/box-chores.png`)
-                                                :
-                                                activeImg == 'financial-edu' ? localImgLoad(`images/home/box-financial.png`)
-                                                :
-                                                activeImg == 'family-connect' ? localImgLoad(`images/home/box-family.png`)
-                                                :
-                                                null
-                                            } 
-                                            alt="image" 
-                                        />
-                                    </div>
-                                    <img 
-                                        className="d-none moving_position_animatin right_img_three position-relative" 
-                                        src={localImgLoad(`images/home/wrenchboard_logo_4.png`)} 
-                                        alt="image" 
-                                    />
-                                </div>
-                            </div>
-                        </div> */}
+                    <div className="col-12 mt-4">
                         <Right />
                     </div>
                 </div>

src/components/lnd/LndParts/Design/Right.js

@@ -1,36 +1,43 @@
 import React from 'react'
+import BGImage from "../../../../assets/images/sec-background.jpg";
 
 export default function Right() {
   return (
-    <div className="w-100">
-        <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+    <div className="p-1 w-100">
+        {/* <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
             <h3 className='title text-center'>Assign Faster with</h3>
             <h3 className='title text-center d-flex justify-content-center flex-nowrap'>
-                <div className='color-blue italic'>Wrench</div><div className='color-purple'>Agent</div>
+                <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
             </h3>
+        </div> */}
+        {/* <div className='px-2 w-100 mb-2'>  */}
+        <div className='color-purple text-center mb-2'>
+            {/* <h3 className='color-purple font-25 mb-10'>Ask our <span>&#x275B;&#x275B;<span className='color-blue italic'>wrench</span>Agent&#x275C;&#x275C;</span> Generative AI to assist</h3> */}
+            <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
+            <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
         </div>
-        <div className='p-2 w-100 bg-white my-2'> 
-            <div className='color-purple text-center'>
-                <h3 className='color-purple font-25 mb-10'>Ask our "WrenchAgent" Generative AI to assist</h3>
-                <h3 className='font_black font-20 mb-10'>"Recommend  4 summer chores for a 12 years old"</h3>
-            </div>
-        </div>
-        <div className="p-2 bg-white custom-w-90 mx-auto border-thin border-r-10 border-skyblue">
-        {list?.map((item, idx) => (
-            <div className="col-12 mb-20" key={idx}>
-                <div
-                    className={`appie-traffic-service-two features appie-modern-design`}
-                >
-                    <div className="icon">
-                    <i className='fal fa-check' />
+        {/* </div> */}
+        {/* withFadeEdge-light-purple border-skyblue border-thin*/}
+        <div className="p-5 bg-white w-100 mx-auto border-r-10 overflow-hidden"
+            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}
+        >
+            <div className='generative-ai'>
+                {list?.map((item, idx) => (
+                    <div className="col-12 mb-20" key={idx}>
+                        <div
+                            className={`appie-traffic-service-two features appie-modern-design`}
+                        >
+                            <div className="icon">
+                            <i className='fal fa-check' />
+                            </div>
+                            <h5 className="title italic color-purple">{item}</h5>
+                        </div>
                     </div>
-                    <h5 className="title italic color-purple">{item}</h5>
+                ))}
+                <div className='w-100 d-flex justify-content-end'>
+                    <a className='main-btn' href={process.env.REACT_APP_DASH_URL_SIGNUP}>Get Started</a>
                 </div>
             </div>
-        ))}
-        <div className='w-100 d-flex justify-content-end'>
-            <button className='main-btn'>Get Started</button>
-        </div>
         </div>
     </div>
   )