From d2f1c182d19c28f3127bf7cbd7804fc538a2da13 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 27 May 2024 18:16:08 +0100
Subject: [PATCH] homepage changes added

---
 src/assets/css/main.css                     | 144 +++++++++-----------
 src/components/lnd/LndParts/Design/Main.js  |  12 +-
 src/components/lnd/LndParts/Design/Right.js |  18 +--
 3 files changed, 84 insertions(+), 90 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ca2a15a..47ecb5e 100755
--- a/src/assets/css/main.css
+++ b/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;
@@ -241,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;
 }
@@ -887,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;
 }
@@ -975,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;
 }
@@ -1014,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;
@@ -1029,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;
@@ -1067,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;
 }
@@ -1420,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;
 }
@@ -1645,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;
@@ -1910,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;
@@ -1918,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;
 }
@@ -2379,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;
@@ -2669,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;
 }
@@ -3144,7 +3149,7 @@ p {
 
 .appie-traffic-title {
   padding-right: 220px;
-  margin-bottom: 43px;
+  margin-bottom: 20px;
 }
 @media (max-width: 767px) {
   .appie-traffic-title {
@@ -3190,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;
@@ -3230,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;*/
 }
@@ -3330,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 
@@ -7254,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;
 }
@@ -7278,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;
diff --git a/src/components/lnd/LndParts/Design/Main.js b/src/components/lnd/LndParts/Design/Main.js
index 41d7dbb..a6e9e8e 100644
--- a/src/components/lnd/LndParts/Design/Main.js
+++ b/src/components/lnd/LndParts/Design/Main.js
@@ -34,9 +34,15 @@ const Main = ({gredient}) => {
                                 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,14 +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="col-lg-6 mt-4 mt-lg-0">
                         <Right />
                     </div>
                 </div>
diff --git a/src/components/lnd/LndParts/Design/Right.js b/src/components/lnd/LndParts/Design/Right.js
index 3eea1c8..0571d4f 100644
--- a/src/components/lnd/LndParts/Design/Right.js
+++ b/src/components/lnd/LndParts/Design/Right.js
@@ -3,19 +3,19 @@ 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 my-2'> 
-            <div className='color-purple text-center'>
-                <h3 className='color-purple font-25 mb-10'>Ask our <span className='black'>&#x275B;&#x275B;WrenchAgent&#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>
+        {/* </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' }}
-- 
2.34.1