topo bug fixed

.env

@@ -5,7 +5,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 REACT_APP_SITE_NAME='WrenchBoard'
 REACT_APP_DASH_URL='https://dev-users.wrenchboard.com'
-REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login"
+REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=us"
 REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -17,3 +17,6 @@ REACT_APP_SUPPORT_PHONE='404 855-7966'
 REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
 REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
 REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com'

.env.development

@@ -5,7 +5,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 REACT_APP_SITE_NAME='WrenchBoard'
 REACT_APP_DASH_URL='https://dev-users.wrenchboard.com'
-REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login"
+REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=us"
 REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -16,4 +16,7 @@ REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
 REACT_APP_SUPPORT_PHONE='404 855-7966'
 REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
 REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
-REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com'

.env.production

@@ -5,7 +5,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 REACT_APP_SITE_NAME='WrenchBoard'
 REACT_APP_DASH_URL='https://users.wrenchboard.com'
-REACT_APP_DASH_URL_LOGIN="https://users.wrenchboard.com/login"
+REACT_APP_DASH_URL_LOGIN="https://users.wrenchboard.com/login?cnt=us"
 REACT_APP_DASH_URL_SIGNUP="https://users.wrenchboard.com/signup?cnt=us"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -16,4 +16,7 @@ REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
 REACT_APP_SUPPORT_PHONE='404 855-7966'
 REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
 REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
-REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+REACT_APP_AGENT_LINK='https://agents.wrenchboard.com'

package.json

@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-countup": "^6.0.0",
     "react-dom": "^17.0.2",
+    "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "react-slick": "^0.28.1",

public/index.html

@@ -115,4 +115,8 @@
       s.parentNode.insertBefore(po, s);
     })();
   </script>
+
+  <!-- plugins js -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
 </html>

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/assets/css/aboutapp.css

@@ -0,0 +1,370 @@
+@media screen and (max-width:1200px) {
+
+  /* about app section */
+  .about_app_section .about_text .app_statstic li {
+    width: 210px;
+    padding-left: 20px;
+  }
+
+  .about_app_section .about_text .app_statstic li p:first-child {
+    font-size: 30px;
+  }
+
+}
+
+
+@media screen and (max-width:992px) {
+
+  /* about app section */
+  .about_app_section .row {
+    flex-direction: column-reverse;
+  }
+
+  .about_app_section .about_img {
+    justify-content: flex-start;
+    margin-top: 75px;
+    margin-left: 0;
+  }
+
+  .about_app_section .about_img::before {
+    left: 50%;
+  }
+
+  .about_app_section .about_img .screen_img {
+    margin-left: -170px;
+  }
+
+  .about_app_section .about_text .app_statstic {
+    justify-content: flex-start;
+  }
+
+  .about_app_section .about_text .app_statstic li {
+    width: 35%;
+    margin-right: 30px;
+  }
+
+  .about_app_section .about_img::before {
+    left: 35%;
+  }
+}
+
+@media screen and (max-width:767px) {
+
+  /* about app section */
+  .about_app_section .about_text,
+  .about_app_section .about_text .section_title {
+    text-align: center;
+  }
+
+  .about_app_section .about_text .app_statstic {
+    margin-top: 0;
+    justify-content: space-between;
+  }
+
+  .about_app_section .about_text .app_statstic li {
+    width: 48%;
+    margin-right: 0;
+  }
+
+  .about_app_section .about_text .app_statstic li p:first-child {
+    font-size: 18px;
+  }
+
+  .about_app_section .about_img {
+    margin: 0;
+    margin-top: 50px;
+    justify-content: center;
+  }
+
+  .about_app_section .about_img::before {
+    width: 350px;
+    height: 350px;
+  }
+}
+
+.row_am.about_app_section._ {
+  background: #fbf4fe;
+}
+
+@media screen and (max-width:479px) {
+
+  /* about app section */
+  .about_app_section .about_img::before {
+    left: 49%;
+  }
+}
+
+/* about app section */
+/* .about_app_section .row {
+    flex-direction: column-reverse;
+  } */
+
+.about_app_section .about_img {
+  justify-content: flex-start;
+  margin-top: 75px;
+  margin-left: 0;
+}
+
+.about_app_section .about_img::before {
+  left: 50%;
+}
+
+.about_app_section .about_img .screen_img {
+  margin-left: -170px;
+}
+
+.about_app_section .about_text .app_statstic {
+  justify-content: flex-start;
+}
+
+.about_app_section .about_text .app_statstic li {
+  width: 35%;
+  margin-right: 30px;
+}
+
+.about_app_section .about_img::before {
+  left: 35%;
+}
+
+/* about app section */
+.about_app_section .about_text .app_statstic {
+  margin-top: 0;
+  justify-content: space-between;
+}
+
+.about_app_section .about_text .app_statstic li {
+  width: 48%;
+  margin-right: 0;
+}
+
+.about_app_section .about_text .app_statstic li p:first-child {
+  font-size: 18px;
+}
+
+.about_app_section .about_img {
+  margin: 0;
+  margin-top: 50px;
+  justify-content: center;
+}
+
+.about_app_section .about_img::before {
+  width: 350px;
+  height: 350px;
+}
+
+
+@media screen and (max-width: 479px) {
+
+  /* about app section */
+  .about_app_section .about_img::before {
+    left: 49%;
+  }
+}
+
+.section_title h2 {
+  font-size: 44px;
+  letter-spacing: 2px;
+  line-height: 54px;
+  text-shadow: 0 4px 10px #0000004d;
+  font-weight: 700;
+  color: #32236F;
+}
+
+.section_title h2 span {
+  color: #1a3544;
+}
+
+/* about us section wraper */
+.about_app_section .about_img {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+/* about us section images*/
+.about_app_section .about_img img {
+  max-width: 100%;
+}
+
+.about_app_section .about_img::before {
+  content: "";
+  position: absolute;
+  left: 38%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 500px;
+  height: 500px;
+  background-color: #fff;
+  border-radius: 100%;
+  z-index: -1;
+}
+
+.about_app_section .about_img .screen_img {
+  margin-left: -135px;
+  margin-top: 110px;
+}
+
+.about_app_section .about_text .section_title {
+  text-align: left;
+}
+
+.about_app_section .about_text .section_title h2 {
+  margin-bottom: 15px;
+}
+
+/* about us section  statastics nomber */
+.about_app_section .about_text .app_statstic {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  margin-top: 40px;
+}
+
+.about_app_section .about_text .app_statstic li {
+  width: 248px;
+  background-color: #fff;
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+  border-radius: 12px;
+  padding: 15px 10px;
+  padding-left: 35px;
+  box-shadow: 0px 4px 10px #ede9fe;
+}
+
+.about_app_section .about_text .app_statstic li .icon {
+  margin-right: 9px;
+}
+
+.about_app_section .about_text .app_statstic li p {
+  margin-bottom: 0;
+  line-height: 1;
+  color: #32236F;
+}
+
+.about_app_section .about_text .app_statstic li p:first-child {
+  font-size: 40px;
+  font-weight: 600;
+  margin-bottom: 3px;
+}
+
+.about_app_section .about_img .screen_img img {
+  animation-delay: 3s;
+}
+
+.row_am {
+  padding: 50px 0;
+}
+
+.row_am {
+  padding: 30px 0;
+}
+
+.puprple_btn {
+  background-color: #1a3544;
+  color: #fff;
+  border-radius: 50px;
+  padding: 10px 40px;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  font-weight: 500;
+}
+
+.puprple_btn::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: .6s all;
+  z-index: -1;
+}
+
+.puprple_btn:hover::before {
+  width: 100%;
+}
+
+.puprple_btn:hover {
+  color: #1a3544;
+}
+
+@media screen and (max-width:767px) {
+
+  /* modern ui section */
+  .modern_ui_section .ui_images {
+    margin-top: 10px;
+  }
+
+  .modern_ui_section .section_title {
+    text-align: center;
+  }
+
+  .modern_ui_section .design_block li {
+    padding-left: 0;
+    margin-bottom: 30px;
+  }
+
+  .modern_ui_section .design_block li::before {
+    position: relative;
+    left: auto;
+    top: auto;
+    display: inline-block;
+  }
+
+}
+
+.modern_ui_section .row {
+  align-items: center;
+}
+
+.modern_ui_section .design_block {
+  margin-top: 45px;
+}
+
+/* modern ui text */
+.modern_ui_section .section_title {
+  text-align: left;
+}
+
+.modern_ui_section .ui_text {
+  padding-right: 75px;
+}
+
+/* modern ui list */
+.modern_ui_section .design_block li {
+  padding-left: 40px;
+  position: relative;
+  margin-bottom: 25px;
+}
+
+.modern_ui_section .design_block li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 5px;
+  background-image: url(../../../src/assets/images/right_icon.png);
+  width: 22px;
+  height: 22px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.modern_ui_section .design_block li h4 {
+  font-size: 24px;
+  font-weight: 700;
+  padding-bottom: 7px;
+  text-shadow: 3px 4px 10px #0000004d;
+
+  color: #32236F;
+  margin-bottom: 8px;
+}
+
+.modern_ui_section .design_block li p {
+  margin-bottom: 0;
+}

src/assets/css/default.css

@@ -1,12 +1,79 @@
-/* Deafult Margin & Padding */
-/*-- Margin Top --*/
+.height-50 {
+	height: 50px;
+}
+.height-100 {
+	height: 100px;
+}
+.height-150 {
+	height: 150px;
+}
+.height-200 {
+	height: 200px;
+}
+
+.italic {
+	font-style: italic;
+}
+
 a {
-    text-decoration: none;
+	text-decoration: none;
     background-color: transparent;
 }
 .expire{
 	color:red;
 }
+
+.border-normal {
+	border: 2px solid black
+}
+.border-thin{
+	border: 4px solid black
+}
+.border-r-5 {
+	border-radius: 5px;
+}
+.border-r-10 {
+	border-radius: 10px;
+}
+
+/* Default Width sizes */
+/*-- Width Sizes --*/
+.custom-w-80 {
+	width: 80%;
+}
+.custom-w-90 {
+	width: 90%;
+}
+
+/* Default Font sizes */
+/*-- Font Sizes --*/
+.font-10 {
+	font-size: 10px;
+}
+.font-16 {
+	font-size: 16px;
+}
+.font-20 {
+	font-size: 20px;
+}
+.font-25 {
+	font-size: 25px;
+}
+.font-30 {
+	font-size: 30px;
+}
+.font-35 {
+	font-size: 35px;
+}
+.font-40 {
+	font-size: 40px;
+}
+.font-45 {
+	font-size: 45px;
+}
+
+/* Deafult Margin & Padding */
+/*-- Margin Top --*/
 .mt-5 {
 	margin-top: 5px;
 }
@@ -815,6 +882,9 @@ a {
 .pl-125 {
 	padding-left: 125px;
 }
+.pl-150 {
+	padding-left: 150px;
+}
 /*-- Padding right --*/
 
 .pr-0 {
@@ -902,6 +972,21 @@ a {
 .black {
 	color: #222;
 }
+.color-blue {
+	color: #5086BA;
+}
+.color-purple {
+	color: purple;
+}
+.bg-purple {
+	color: purple;
+}
+.border-purple {
+	border-color: purple;
+}
+.border-skyblue {
+	border-color: #5086BA;
+}
 /* black overlay */
 
 [data-overlay] {

src/assets/css/main.css

@@ -1,4 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
+@import url("aboutapp.css");
+
 body {
   font-family: "Roboto", sans-serif;
   font-weight: normal;
@@ -140,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;
@@ -154,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;
@@ -181,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;
@@ -229,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;
 }
@@ -875,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;
 }
@@ -963,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;
 }
@@ -1002,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;
@@ -1017,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;
@@ -1055,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;
 }
@@ -1408,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;
 }
@@ -1633,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;
@@ -1898,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;
@@ -1906,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;
 }
@@ -1965,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;
@@ -2025,7 +2047,7 @@ p {
   height: 500px;
   width: 500px;
   transform: translate(-50%, -50%);
-  background: #4687ba;
+  background: #dbedf5;
   border-radius: 50%;
   z-index: -1;
 }
@@ -2367,7 +2389,7 @@ p {
     4.APPIE SERVOCE css 
 ===========================*/
 .appie-service-area {
-  background: #fbf4fe;
+  background: #fdfaf4;
   position: relative;
   background-position: 92% 100%;
   background-repeat: no-repeat;
@@ -2547,8 +2569,8 @@ p {
   border-radius: 50%;
 }
 .appie-single-service-2 .icon img {
-  height: 100px;
-  width: 100px;
+  height: 200px;
+  /* width: 100px; */
 }
 .appie-single-service-2 .title {
   font-size: 24px;
@@ -2657,10 +2679,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;
 }
@@ -3098,6 +3120,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 
 ===========================*/
@@ -3127,7 +3154,7 @@ p {
 
 .appie-traffic-title {
   padding-right: 220px;
-  margin-bottom: 43px;
+  margin-bottom: 20px;
 }
 @media (max-width: 767px) {
   .appie-traffic-title {
@@ -3168,34 +3195,23 @@ p {
   }
 }
 
-.appie-traffic-service {
+.appie-traffic-service, .appie-traffic-service-two {
   position: relative;
+}
+.appie-traffic-service {
   padding-left: 40px;
-  padding-right: 70px;
+  /* padding-right: 70px; */
 }
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-  .appie-traffic-service {
-    padding-right: 0;
-  }
+.appie-traffic-service-two {
+  padding-left: 40px;
 }
-@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 .icon, .appie-traffic-service-two .icon {
   position: absolute;
   left: 0;
-  top: 5px;
+  top: 0;
 }
-.appie-traffic-service .icon i {
+.appie-traffic-service .icon i, .appie-traffic-service-two .icon i {
   height: 26px;
   width: 26px;
   text-align: center;
@@ -3206,14 +3222,14 @@ p {
   font-size: 14px;
   box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
 }
-.appie-traffic-service .title {
-  font-size: 24px;
+.appie-traffic-service .title, .appie-traffic-service-two title {
+  font-size: 20px;
   font-weight: 700;
   padding-bottom: 7px;
   text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
 }
-.appie-traffic-service p {
-  font-size: 17px;
+.appie-traffic-service p, .appie-traffic-service-two p {
+  font-size: 16px;
   margin-top: 10px;
   /*margin-bottom: 2px;*/
 }
@@ -3242,13 +3258,13 @@ p {
 /* .modern_ui_section{
   margin-top: 100px;
 } */
-.modern_ui_section .section_sub_title{
+.modern_ui_section .section_sub_title, .title .section_sub_title{
   font-size: 30px;
   color: purple;
 }
 .modern_ui_section .ui_images{
   border-radius: 100%;
-  background-color: #fff;
+  background-color: #f9f4fe;
   width: auto;
   height: auto;
   padding: 30px 10px;
@@ -3307,10 +3323,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 
@@ -7231,17 +7247,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;
 }
@@ -7255,18 +7271,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;
@@ -8594,4 +8610,32 @@ LND PAGE STYLE STARTS HERE
   .banner_text h1{
     font-size: 30px;
   }
+}
+
+
+/* -----------Interface_Section-Css-Start----------------- */
+
+/* interface wraper */
+.interface_section .screen_slider {
+  margin-top: 35px;
+  /* min-height: 520px; */
+  display: flex;
+  align-items: center;
+}
+
+/* interface images */
+.interface_section .owl-item .screen_frame_img img {
+  transform: scale(.9);
+  /* border: 2px solid #000; */
+  border-radius: 20px;
+  transition: 1s all;
+  margin: 0 auto;
+  height: 520px;
+  width: auto;
+}
+
+.interface_section .owl-item.center .screen_frame_img img {
+  transform: scale(1);
+  /* border: 3px solid #000; */
+  /* padding: 5px; */
 }

src/assets/css/style.css

@@ -142,3 +142,94 @@
     left: 15px;
   }
 }
+
+
+/* -----------------About-App-Section-Css-Start------------------ */
+
+/* about us section wraper */
+.about_app_section .about_img {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+/* about us section images*/
+.about_app_section .about_img img {
+  max-width: 100%;
+}
+
+.about_app_section .about_img::before {
+  content: "";
+  position: absolute;
+  left: 38%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 500px;
+  height: 500px;
+  background-color: #ffffff;
+  border-radius: 100%;
+  z-index: -1;
+}
+
+.about_app_section .about_img .screen_img {
+  margin-left: -135px;
+  margin-top: 110px;
+}
+
+.about_app_section .about_text .section_title {
+  text-align: left;
+}
+
+.about_app_section .about_text .section_title h2 {
+  margin-bottom: 15px;
+}
+
+/* about us section  statastics nomber */
+.about_app_section .about_text .app_statstic {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  margin-top: 40px;
+}
+
+.about_app_section .about_text .app_statstic li {
+  width: 248px;
+  background-color: #fff;
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+  border-radius: 12px;
+  padding: 15px 10px;
+  padding-left: 35px;
+  box-shadow: 0px 4px 10px #EDE9FE;
+}
+
+.about_app_section .about_text .app_statstic li .icon {
+  margin-right: 9px;
+}
+
+.about_app_section .about_text .app_statstic li p {
+  margin-bottom: 0;
+  line-height: 1;
+  color: #32236F;
+}
+
+.about_app_section .about_text .app_statstic li p:first-child {
+  font-size: 40px;
+  font-weight: 600;
+  margin-bottom: 3px;
+}
+
+.about_app_section .about_img .screen_img img {
+  animation-delay: 3s;
+}
+
+.about_app_section .about_text .list {
+  margin-top: 45px;
+  margin-bottom: 45px;
+}
+
+.about_text{
+  margin-top: 2rem;
+}

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/Blog/index.js

@@ -26,7 +26,7 @@ function Blog() {
       <section className="blogpage-section">
         <div className="container">
           <div className="row">
-            <div className="col-lg-12 col-md-7">
+            <div className="col-12">
               <Blogs />
             </div>
           </div>

src/components/HomeOne/FeaturedScreen.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import OwlCarousel from 'react-owl-carousel'
+import localImgLoad from '../../lib/localImgLoad'
+
+import 'owl.carousel/dist/assets/owl.carousel.css'
+import 'owl.carousel/dist/assets/owl.theme.default.css'
+import LazyImage from '../../lib/LazyImage'
+
+export default function FeaturedScreen() {
+  
+    const screen_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        center: true,
+        dots: true, 
+        responsive:{
+            0:{
+                items:1
+            },
+            600:{
+                items:2
+            },
+            800:{
+                items:3
+            },
+            1200:{
+                items:4
+            },
+            1400:{
+                items:5
+            }
+        }
+    }
+  return (
+    <>
+        <section className="appie-service-area pt-50 pb-50 interface_section">
+            <div className="container-fluid">
+                <div className="appie-traffic-title section_title text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                    <h3 className='title'>App Screens <div className='section_sub_title'></div></h3>
+                    <p>Simplicity of use is our goal always. Here are some of our featured screens.</p>
+                </div>
+                <div className="screen_slider" >
+                    <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_1.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}

src/components/HomeOne/FooterHomeOne.js

@@ -22,13 +22,13 @@ function FooterHomeOne({ className }) {
                                 <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,10 @@ 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>
                                     </li>
                                     <li>
                                         <Link to="/blog">Blog</Link>
@@ -70,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

@@ -1,30 +1,41 @@
 import React from 'react';
 import heroThumbOne from '../../assets/images/app-thumb-1.png';
-import heroThumbOne1 from '../../assets/images/app-thumb-2.png';
 
 import heroThumbTwo from '../../assets/images/app-pic.png';
 import shapeTwo from '../../assets/images/shape/shape-2.png';
-import shapeThree from '../../assets/images/shape/shape-3.png';
-import shapeFour from '../../assets/images/shape/shape-4.png';
+
 import getConfig from './../../Config/config'
 import CustomSlider from '../customSlider/CustomSlider';
 
+// import SliderOne from '../../assets/images/home/app-slide-home-0.png'
+
+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 SliderCenter from '../../assets/images/home/top_sliders/slide_33.png'
+
 
 function HeroHomeOne() {
-  var site = getConfig()[0];
+
+  const sliders = [
+    SliderOne, SliderTwo, SliderCenter, SliderThree, SliderFour, SliderFive
+  ]
+
   return (
     <>
       <section className="appie-hero-area">
         <div className="container">
-          <div className="row align-items-center">
+          <div className="row">
             <div className="col-lg-6">
-              <div className="appie-hero-content appie-hero-content-6">
+              <div className="appie-hero-content appie-hero-content-6 d-flex flex-column h-100">
                 {/*<span>Welcome To WrenchBoard..</span>*/}
                 <h1 className="appie-title">
                   Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
                 </h1>
                 <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.</p>
-                <ul>
+                <ul className='d-flex justify-content-center justify-content-lg-start'>
                   <li className=''>
                       <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
                           <i className="fab fa-apple"></i>
@@ -52,9 +63,9 @@ function HeroHomeOne() {
                   data-wow-delay="200ms"
                 >
                   {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
-                  <div style={{ width: '350px', margin: 'auto' }}>
+                  <div style={{ width: '350px', height:'auto', margin: 'auto' }}>
                     <CustomSlider
-                      images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
+                      images={sliders}
                       speed='5'
                       indicatorColor='#333'
                     />

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/HomeOne/ServicesHomeOne.js

@@ -28,31 +28,7 @@ function ServicesHomeOne({ className }) {
     <section
       className={`appie-service-area pt-50 pb-50 ${className}`}
       id="service"
-    >
-      {/* <div className="container">
-        <div className="row justify-content-center">
-          <div className="col-lg-8">
-            <div className="appie-section-title text-center">
-              <h3 className="appie-title">
-              Set Chores, Set Goals and <br /> Rewards Accomplishments
-              </h3>
-            </div>
-          </div>
-        </div>
-        <div className="row">
-          {serviceItems.map(({ icon, title, description }, index) => (
-            <div key={index} className="col-lg-3 col-md-6">
-              <ServiceItem
-                icon={icon}
-                title={title}
-                description={description}
-                index={index}
-              />
-            </div>
-          ))}
-        </div>
-      </div> */}
-      
+    >    
       <Main />
     </section>
   );

src/components/HomeOne/index.js

@@ -18,6 +18,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
 import WrenchBoardHome from './WrenchBoardHome';
 import RecentJobsOne from './RecentJobsOne';
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+import FeaturedScreen from './FeaturedScreen';
 //import BlogData from './../../Services/BlogData';
 
 function HomeOne() {
@@ -35,6 +36,7 @@ function HomeOne() {
             {/*<FaqHomeOne />*/}
             {/*<TrafficHomeOne />*/}
             <TrafficHomeTwo />
+            <FeaturedScreen />
             {/*<TestimonialHomeOne />*/}
             {/*<TeamHomeOne />*/}
             {/*<PricingHomeOne />*/}

src/components/News/Blogs.js

@@ -48,7 +48,7 @@ function Blogs({ pathname }) {
             data-wow-delay="200ms"
           >
             <Link to={`/blog/blogdetail/${blog?.id}`} className="thumb">
-              <img src={blgImg} alt={blog.post_title} style={{cursor: "pointer"}} width={370} height={278} loading="lazy" />
+              <img src={blgImg} alt={blog.post_title} width={370} height={'auto'} loading="lazy" />
             </Link>
             <div className="content">
               <div className="blog-meta">

src/components/Service/MissionStatement.js

@@ -29,7 +29,7 @@ function MissionStatement() {
         },
         {
             id: 4,
-            title: "Get you work done",
+            title: "Get your work done",
             content: "For other tasks you need to get done, we will be there for smooth engagement",
         }
     ];

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/Service/index.js

@@ -27,7 +27,7 @@ function Service() {
             <HeroNews
                 title="Services"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/service', title: 'Service' },
                 ]}
             />

src/components/UseCases/index.js

@@ -7,6 +7,7 @@ import UseCase from './UseCase';
 // import BlogSideBar from './BlogSideBar';
 import HeaderNews from './HeaderNews';
 import HeroNews from './HeroNews';
+import AboutApp from '../lnd/LndParts/AboutApp/Main'
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function UseCases() {
@@ -19,10 +20,11 @@ function UseCases() {
             <HeroNews
                 title="Use Cases"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/use-cases', title: 'Use Cases' },
                 ]}
             />
+            <AboutApp />
             <section className="blogpage-section">
                 <div className="container">
                     <div className="row">

src/components/customSlider/CustomSlider.js

@@ -50,7 +50,6 @@ function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
               }`,
               opacity: `${sliderCount == index ? "1" : "0"}`,
             }}
-            // style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, opacity:`${sliderCount == index ? '1':'0'}`}}
           />
         ))}
       </div>

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

@@ -1,101 +1,58 @@
 import { Link } from 'react-router-dom'
 import React from 'react'
-import frame from '../../../../assets/images/about-frame.png'
-import screen from '../../../../assets/images/about-screen.png'
+//import frame from '../../../../assets/images/about-frame.png'
+import frame from '../../../../assets/images/use-case-side-main.png'; //about-frame.png'
+import screen from '../../../../assets/images/use-case-side-extra.png'; //about-screen.png'
 import img1 from '../../../../assets/images/download.png'
 import img2 from '../../../../assets/images/followers.png'
 import img3 from '../../../../assets/images/reviews.png'
 import img4 from '../../../../assets/images/countries.png'
 
-const Main = ({video , dark}) => {
+const Main = ({ video, dark }) => {
   return (
     <>
-        <section className="row_am about_app_section">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-6">
-                        <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
-                        <div className="frame_img">
-                            <img className="moving_position_animatin" src={frame} alt="image"/>
-                        </div>
-                        <div className="screen_img">
-                            <img className="moving_animation" src={screen} alt="image" />
-                        </div>
-                        </div>
-                    </div>                   
-                    <div className="col-lg-6">
-                        <div className="about_text">
-                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                            <h2>Some awesome words <span>about app.</span></h2>
-                            <p>
-                            Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
-                            industrys standard dummy text ever since the when an unknown printer took a galley of type and. Lorem
-                            ipsum dolor sit amet.
-                            </p>
-                        </div>
-                        {dark ?
-                            <ul className="list">
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                    <i className="icofont-verification-check"></i> Simply dummy text of the printing and 
-                                </li>
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                <i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the 
-                                </li>
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                    <i className="icofont-verification-check"></i> Industrys standard dummy text 
-                                </li>
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                    <i className="icofont-verification-check"></i> Simply dummy text of the printing and 
-                                </li>
-                                <li data-aos="fade-up" data-aos-duration="1500">
-                                    <i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the 
-                                </li>
-                             </ul>
-                             :
-                            <ul className="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
-                                <li>
-                                <div className="icon">
-                                {video ? <img src="assets/images/download-one.png" alt="image" /> : <img src={img1} alt="image" />} 
-                                </div>
-                                <div className="text">
-                                    <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
-                                    <p>Download</p>
-                                </div>
-                                </li>
-                                <li>
-                                <div className="icon">
-                                {video ? <img src="assets/images/followers-one.png" alt="image" /> : <img src={img2} alt="image" /> }
-                                </div>
-                                <div className="text">
-                                    <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
-                                    <p>Followers</p>
-                                </div>
-                                </li>
-                                <li>
-                                <div className="icon">
-                                    {video ? <img src="assets/images/reviews-one.png" alt="image" /> : <img src={img3} alt="image" /> }
-                                </div>
-                                <div className="text">
-                                    <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
-                                    <p>Reviews</p>
-                                </div>
-                                </li>
-                                <li>
-                                <div className="icon">
-                                    {video ? <img src="assets/images/countries-one.png" alt="image" /> : <img src={img4} alt="image" /> }
-                                </div>
-                                <div className="text">
-                                    <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
-                                    <p>Countries</p>
-                                </div>
-                                </li>
-                            </ul>}
-                            <Link to="/contact" className="btn puprple_btn" data-aos="fade-in" data-aos-duration="1500">START FREE TRIAL</Link>
-                        </div>
-                    </div>
+      <section className="row_am about_app_section _">
+        <div className="container">
+          <div className="row modern_ui_section">
+            <div className="col-lg-6">
+              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+                <div className="frame_img">
+                  <img className="moving_position_animatin" src={frame} alt="image" />
                 </div>
+                <div className="screen_img">
+                  <img className="moving_animation" src={screen} alt="image" />
+                </div>
+              </div>
             </div>
-        </section> 
+            <div className="col-lg-6">
+              <div className="about_text">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                  <h2>Motivate & Organize <br /> <span>Rewards</span></h2>
+                  <p>
+                    With a planned reward, the parent can introduce the family to earning and start financial education early.
+                  </p>
+                </div>
+
+
+                <ul className="design_block">
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Goals Completed</h4>
+                    <p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Connect Family</h4>
+                    <p>It takes a village to raise a kid and share good news and encouragement from the more prominent family. Connect family to the achievements to boost encouragement. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Find any Task </h4>
+                    <p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </>
   )
 }

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

@@ -5,6 +5,7 @@ import img1 from '../../../../assets/images/modern01.png'
 import img2 from '../../../../assets/images/secure_data.png'
 import img3 from '../../../../assets/images/modern02.png'
 import img4 from '../../../../assets/images/modern03.png'
+import Right from './Right'
 
 
 const Main = ({gredient}) => {
@@ -17,61 +18,47 @@ const Main = ({gredient}) => {
 
   return (
     <>
-        <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
+        <section className={`row_am ${gredient && "gredient-bg"}`} >
             {gredient &&
             <div className="modernui_section_bg modernui-gredient"> 
                 <img src="assets/images/section-bg.png" alt="image"/> 
             </div>
             }
             <div className="container">
-                <div className="row align-items-center">
+                <div className="row">
                     <div className="col-lg-6">
-                        <div className="ui_text 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="w-100">
+                            <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="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`}
-                                        style={{ paddingRight: "45px" }}
                                     >
                                         <div className="icon">
                                         <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_one" src={img2} alt="image" /> */}
-                                        <img className="moving_position_animatin right_img_two" src={img3} alt="image" />
-                                    </div>
-                                    <img className="moving_position_animatin right_img_three position-relative" src={img4} alt="image" />
-                                </div>
-                            </div>
-                        </div>
+                    <div className="col-lg-6 mt-4 mt-lg-0">
+                        <Right />
                     </div>
                 </div>
             </div>