homepage changes added

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;
@@ -155,12 +154,18 @@ p {
   -ms-transition: all 0.4s ease-out 0s;
   -o-transition: all 0.4s ease-out 0s;
   transition: all 0.4s ease-out 0s;
-  background-color: #4687ba;
+  /* background-color: #4687ba; */
+  /* border: 1px solid #4687ba; */
+  border: 1px solid #89216b;
+  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%);
 }
 .main-btn:hover {
-  background-color: #fff;
+  /* background-color: #fff;
   color: #2b70fa;
-  border-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 +188,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 +246,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 +892,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 +980,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 +1019,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 +1034,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 +1072,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 +1425,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 +1650,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 +1915,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 +1923,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;
 }
@@ -2369,7 +2384,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 +2674,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 +3115,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 +3149,7 @@ p {
 
 .appie-traffic-title {
   padding-right: 220px;
-  margin-bottom: 43px;
+  margin-bottom: 20px;
 }
 @media (max-width: 767px) {
   .appie-traffic-title {
@@ -3175,29 +3195,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 +3218,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 +3318,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 
@@ -7239,17 +7242,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 +7266,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/lnd/LndParts/Design/Main.js

@@ -28,15 +28,21 @@ const Main = ({gredient}) => {
                 <div className="row">
                     <div className="col-lg-6">
                         <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'}}>
+                            <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'>Rewards 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.
                                 </p>
                             </div>
+                            <div className="appie-traffic-title section_title mb-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                                <h3 className='title text-center text-lg-left'>Assign Faster with</h3>
+                                <h3 className='w-100 title text-center d-flex justify-content-center justify-content-lg-end flex-nowrap'>
+                                    <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
+                                </h3>
+                            </div>
                             <div className="row">
                             {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" 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-lg-6 mt-4 mt-lg-0">
                         <Right />
                     </div>
                 </div>

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

@@ -1,36 +1,42 @@
 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='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-2 pt-3 bg-white custom-w-90 mx-auto border-r-10 overflow-hidden"
+            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', 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>
   )