remove sections

.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'

src/Services/ContactData.js

@@ -1,11 +1,12 @@
-import Axios from 'axios';
-import getConfig from './../Config/config'
+import axios from 'axios';
 
-async function ContactData(callData) {
-    // debugger;
-    var site = getConfig()[0];
-    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, callData);
-    return response.data.result;
+async function ContactData(reqData) {
+    let formData = new FormData()
+    for (let value in reqData) {
+        formData.append(value, reqData[value]);
+      }
+    let response = await axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, reqData);
+    return response;
 }
 
 export default ContactData;

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,23 @@ 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%); */
+}
+@media only screen and (max-width: 568px) {
+  .main-btn {
+    padding: 0 15px;
+  }
 }
 .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 +194,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 +252,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 +898,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 +986,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 +1025,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 +1040,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 +1078,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 +1431,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 +1656,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 +1921,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 +1929,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 +1988,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 +2052,7 @@ p {
   height: 500px;
   width: 500px;
   transform: translate(-50%, -50%);
-  background: #4687ba;
+  background: #dbedf5;
   border-radius: 50%;
   z-index: -1;
 }
@@ -2291,6 +2318,13 @@ p {
   }
 }
 
+.appie-blog-item{
+  background-color: #F1F8FF;
+  padding: 20px;
+  min-height: 350px;
+  border-radius: 10px
+}
+
 @media screen and (min-width: 688px) and (max-width: 1031px) {
   /* Your CSS styles for this viewport size */
   .appie-blog-item{
@@ -2367,7 +2401,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 +2581,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 +2691,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 +3132,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 +3166,7 @@ p {
 
 .appie-traffic-title {
   padding-right: 220px;
-  margin-bottom: 43px;
+  margin-bottom: 20px;
 }
 @media (max-width: 767px) {
   .appie-traffic-title {
@@ -3168,34 +3207,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 +3234,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 +3270,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 +3335,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 
@@ -4921,6 +4949,7 @@ p {
   border-radius: 3px;
   left: 0;
   top: 4px;
+  object-fit: cover;
 }
 
 .popular-post h5 {
@@ -6706,29 +6735,38 @@ blockquote cite {
   background-repeat: no-repeat;
 }
 
-.appie-about-8-box {
-  padding: 50px 50px 145px;
+.appie-about-container {
   background: #fff;
   border-radius: 6px;
   box-shadow: 0px 40px 40px 0px rgba(14, 17, 51, 0.1);
   position: relative;
   overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.appie-about-8-box {
+  padding: 50px 50px 0px 50px;
   z-index: 10;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-about-8-box {
-    padding: 50px 25px 145px;
+    padding: 50px 25px 0px 25px;
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
-  .appie-about-8-box {
+  .appie-about-container {
     margin-bottom: 30px;
   }
 }
 @media (max-width: 767px) {
-  .appie-about-8-box {
+  .appie-about-container{
     margin-bottom: 30px;
-    padding: 50px 20px 145px;
+  }
+  .appie-about-8-box {
+    padding: 50px 20px 0px 20px;
   }
 }
 .appie-about-8-box .thumb {
@@ -6755,13 +6793,13 @@ blockquote cite {
     line-height: 40px;
   }
 }
-.appie-about-8-box a {
+.appie-about-container a {
   border: 2px solid #db0f30;
   color: #db0f30;
   background: #fff;
   margin-top: 30px;
 }
-.appie-about-8-box a:hover {
+.appie-about-container a:hover {
   color: #fff;
   background: #db0f30;
   border-color: #db0f30;
@@ -7231,17 +7269,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 +7293,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;
@@ -8610,7 +8648,7 @@ LND PAGE STYLE STARTS HERE
 /* interface images */
 .interface_section .owl-item .screen_frame_img img {
   transform: scale(.9);
-  border: 2px solid #000;
+  /* border: 2px solid #000; */
   border-radius: 20px;
   transition: 1s all;
   margin: 0 auto;
@@ -8620,6 +8658,6 @@ LND PAGE STYLE STARTS HERE
 
 .interface_section .owl-item.center .screen_frame_img img {
   transform: scale(1);
-  border: 3px solid #000;
-  padding: 5px;
+  /* 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/AboutText/AboutText.js

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

src/components/AboutUs/HeaderAbout.js

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

src/components/AboutUs/HeroAbout.js

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

src/components/AboutUs/ServicesAbout.js

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

src/components/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/Contact/Forms.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import getConfig from './../../Config/config'
 import ContactData from '../../Services/ContactData';
 
@@ -7,34 +7,69 @@ function Forms() {
 
     var site = getConfig()[0];
 
+    const [formDetails, setFormDetails] = useState({
+        first_name: '',
+        last_name: '',
+        email: '',
+        subject: '',
+        phone_number: '',
+        action: 1001,
+        message: '',
+        channel: 'WEB',
+        terms_conditions: false
+    })
+
+    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
+
+    const handleChange = ({target:{name, value}}) => {
+        setFormDetails(prev => ({...prev, [name]:value}))
+    }
+
+    const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
+
     function handleSubmit(e) {
-        e.preventDefault();
-      //  console.log('You clicked submit.');
-      //  console.log(e);
-       // debugger;
-        const firstname = e.target['f-name'].value;
-        const lastname = e.target['l-name'].value;
-        const email = e.target['email'].value;
-        const phone = e.target['phone'].value;
-        const subject = e.target['subject'].value;
-        const message =  e.target['message'].value;
-        const terms =   e.target['terms-conditions'].checked;
-//alert(terms);
+        e.preventDefault()
+        setRequestStatus({loading:true, status:false, msg:''})
+        if(!validForm){
+            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
 
-        var callData = [{
-            "firstname": firstname,
-            "lastname": lastname,
-            "email": email,
-            "phone": phone,
-            "subject": subject,
-            "message": message,
-            "channel": 'WEB'
-        }];
+        delete formDetails.terms_conditions
 
-       const callRet = ContactData(callData);
-       console.log('You clicked submit========> '+ callRet);
-
-      }
+       ContactData(formDetails).then(res =>{
+        if(res?.data?.result != '100'){
+            setRequestStatus({loading:false, status:false, msg:'failed to send message'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        setRequestStatus({loading:false, status:true, msg:'message Sent'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+            setFormDetails({
+                first_name: '',
+                last_name: '',
+                email: '',
+                subject: '',
+                phone_number: '',
+                action: 1001,
+                message: '',
+                channel: 'WEB',
+                terms_conditions: false
+            })
+        },3000)
+       }).catch(err => {
+        setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+        },3000)
+       });
+    }
 
 
     return (
@@ -99,10 +134,10 @@ function Forms() {
                                 <h4>Let’s Connect</h4>
                                 <form onSubmit={handleSubmit} className="row">
                                     <div className="col-md-6">
-                                        <input type="text" name="f-name" placeholder="First Name"  maxLength={15} />
+                                        <input type="text" name="first_name" placeholder="First Name"  maxLength={15} onChange={handleChange} value={formDetails.first_name} />
                                     </div>
                                     <div className="col-md-6">
-                                        <input type="text" name="l-name" placeholder="Last Name"  maxLength={15} />
+                                        <input type="text" name="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
                                     </div>
                                     <div className="col-md-6">
                                         <input
@@ -110,36 +145,52 @@ function Forms() {
                                             name="email"
                                             placeholder="Email Address" 
                                             maxLength={35} 
+                                            onChange={handleChange}
+                                            value={formDetails.email}
                                         />
                                     </div>
                                     <div className="col-md-6">
                                         <input
                                             type="number"
-                                            name="phone"
+                                            name="phone_number"
                                             placeholder="Phone Number" 
                                             maxLength={15} 
+                                            onChange={handleChange}
+                                            value={formDetails.phone_number}
                                         />
                                     </div>
                                     <div className="col-md-12">
-                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35}  />
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
                                     </div>
                                     <div className="col-md-12">
                                         <textarea
                                             name="message"
                                             placeholder="How can we help?"
+                                            onChange={handleChange}
+                                            value={formDetails.message}
                                         ></textarea>
                                     </div>
                                     <div className="col-md-6">
                                         <div className="condition-check">
-                                            <input id="terms-conditions" name="terms-conditions" type="checkbox" />
+                                            <input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
                                             <label htmlFor="terms-conditions">
                                                 I agree to the <a href="#">Terms & Conditions</a>
                                             </label>
                                         </div>
                                     </div>
                                     <div className="col-md-6 text-right">
-                                        <input type="submit" name="submit" value="Send Message" />
+                                        <input 
+                                            type="submit"  
+                                            value={ requestStatus.loading ? 'Sending...' : 'Send Message'} 
+                                            disabled={requestStatus.loading} 
+                                            className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
+                                        />
                                     </div>
+                                    {/* <div className="p-2 col-12">
+                                        {requestStatus.msg &&
+                                        }
+                                    </div> */}
+                                    <p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
                                 </form>
                             </div>
                         </div>

src/components/HomeOne/AfterHero.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import thumb4 from '../../assets/images/about-thumb-4.png';
+import thumb5 from '../../assets/images/about-thumb-5.png';
+import cardImg from '../../assets/images/home/card-home-01.png'
+
+function AfterHero() {
+    return (
+        <>
+            <section className="appie-about-8-area pt-100 pb-100">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-section-title mb-30">
+                                <h3 className="appie-title">
+                                    {/* We bring everything <br />
+                                    that's required to build apps */}
+                                    Set Chores, Set Goals
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="row">
+                        <div className="col-lg-7 mb-3 mb-lg-0">
+                            <div className='appie-about-container'>
+                                <div className="appie-about-8-box">
+                                    <h3 className="title">
+                                        Reward Accomplishments
+                                    </h3>
+                                    <p>
+                                        Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
+                                    </p>
+                                </div>
+                                <div className='row'>
+                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
+                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                            Learn More <i className="fal fa-arrow-right" />
+                                        </a>
+                                    </div>
+                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
+                                        <img className='w-100 h-100' src={cardImg} alt="Child Card" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-5">
+                            {/* <div className="appie-about-8-box">
+                                <h3 className="title">
+                                    Assign Faster with <br />
+                                    wrenchAgent
+                                </h3>
+                                <p>
+                                    Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
+                                </p>
+                                <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                    Learn More <i className="fal fa-arrow-right" />
+                                </a>
+                                <div className="thumb mr-30">
+                                    <img src={thumb5} alt="" />
+                                </div>
+                            </div> */}
+                            <div className='appie-about-container'>
+                                <div className="appie-about-8-box">
+                                    <h3 className="title">
+                                        Assign Faster with <br />
+                                        wrenchAgent
+                                    </h3>
+                                    <p>
+                                        Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
+                                    </p>
+                                </div>
+                                <div className='row'>
+                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
+                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                            Learn More <i className="fal fa-arrow-right" />
+                                        </a>
+                                    </div>
+                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
+                                        <img className='w-100 h-100' src={thumb5} alt="" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default AfterHero;

src/components/HomeOne/FeaturedScreen.js

@@ -4,6 +4,7 @@ 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() {
   
@@ -17,12 +18,18 @@ export default function FeaturedScreen() {
         dots: true, 
         responsive:{
             0:{
-                items:2
+                items:1
             },
             600:{
+                items:2
+            },
+            800:{
                 items:3
             },
-            1000:{
+            1200:{
+                items:4
+            },
+            1400:{
                 items:5
             }
         }
@@ -39,37 +46,44 @@ export default function FeaturedScreen() {
                     <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/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/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/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/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/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_6.png')} alt="image" />
+                                {/* <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/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
                             </div>
                         </div>
                     </OwlCarousel>

src/components/HomeOne/FooterHomeOne.js

@@ -16,19 +16,19 @@ function FooterHomeOne({ className }) {
                             <div className="footer-about-widget">
                                 <div className="logo">
                                     <a href="#">
-                                        <img src={logo} alt="WrenchBoard" loading='eager' width={300} height={65} />
+                                        <img src={logo} alt="WrenchBoard" loading='eager' width={175} height={38} />
                                     </a>
                                 </div>
                                 <p>
                                     {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                 </p>
-                                <a href="/service">
+                                <Link to="/service">
                                     Read More <i className="fal fa-arrow-right" />
-                                </a>
+                                </Link>
                                 <div className="social mt-30">
                                     <ul>
                                         <li>
-                                            <a href={site.facebook_link}>
+                                            <a to={site.facebook_link}>
                                                 <i className="fab fa-facebook-f" />
                                             </a>
                                         </li>
@@ -53,7 +53,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 className='d-none'>
+                                        <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>
+                <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a task portfolio and find others to perform tasks for you.</p>
+                <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/NextAfterHero.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import serviceThumb from '../../assets/images/service-thumb-1.png';
+
+function NextAfterHero() {
+    return (
+        <>
+            <section
+                className="appie-services-2-area appie-services-8-area pt-90 pb-55"
+                id="service"
+            >
+                <div className="container">
+                    <div className="row align-items-end">
+                        <div className="col-lg-6 col-md-8">
+                            <div className="appie-section-title">
+                                <h3 className="appie-title">Solution for every need.</h3>
+                                <p>The app provides design and digital marketing.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="row align-items-center">
+                        <div className="col-lg-7">
+                            <div className="row">
+                                <div className="col-lg-6 col-md-6">
+                                    <div
+                                        className="
+                    appie-single-service-2 appie-single-service-about
+                    mt-30
+                    wow
+                    animated
+                    fadeInUp
+                  "
+                                        data-wow-duration="2000ms"
+                                        data-wow-delay="200ms"
+                                    >
+                                        <div className="icon">
+                                            <i className="fal fa-tv" />
+                                        </div>
+                                        <h4 className="title">Carefully designed</h4>
+                                        <p>
+                                            He lost his bottle loo don't get shirty with me ruddy.
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="col-lg-6 col-md-6">
+                                    <div
+                                        className="
+                    appie-single-service-2 appie-single-service-about
+                    item-2
+                    mt-30
+                    wow
+                    animated
+                    fadeInUp
+                  "
+                                        data-wow-duration="2000ms"
+                                        data-wow-delay="400ms"
+                                    >
+                                        <div className="icon">
+                                            <i className="fal fa-code" />
+                                        </div>
+                                        <h4 className="title">Clean Modern Code</h4>
+                                        <p>
+                                            He lost his bottle loo don't get shirty with me ruddy.
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="col-lg-6 col-md-6">
+                                    <div
+                                        className="
+                    appie-single-service-2 appie-single-service-about
+                    item-3
+                    mt-30
+                    wow
+                    animated
+                    fadeInUp
+                  "
+                                        data-wow-duration="2000ms"
+                                        data-wow-delay="600ms"
+                                    >
+                                        <div className="icon">
+                                            <i className="fal fa-user-friends" />
+                                        </div>
+                                        <h4 className="title">User Interactive</h4>
+                                        <p>
+                                            He lost his bottle loo don't get shirty with me ruddy.
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="col-lg-6 col-md-6">
+                                    <div
+                                        className="
+                    appie-single-service-2 appie-single-service-about
+                    item-4
+                    mt-30
+                    wow
+                    animated
+                    fadeInUp
+                  "
+                                        data-wow-duration="2000ms"
+                                        data-wow-delay="200ms"
+                                    >
+                                        <div className="icon">
+                                            <i className="fal fa-mobile" />
+                                        </div>
+                                        <h4 className="title">Choose a App</h4>
+                                        <p>
+                                            He lost his bottle loo don't get shirty with me ruddy.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-5">
+                            <div className="service-thumb">
+                                <img src={serviceThumb} alt="" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default NextAfterHero;

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/TrafficHomeOne.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import thumb from '../../assets/images/traffic-thumb.png';
+import thumb from '../../assets/images/home-app-page.png';
 
 function TrafficHomeTwo() {
     return (
@@ -8,10 +8,9 @@ function TrafficHomeTwo() {
                 <div className="row">
                     <div className="col-lg-7">
                         <div className="appie-traffic-title">
-                            <span>Post</span>
-                            <h3 className="title">Posting Jobs.</h3>
+                            <h3 className="title">Family Connect</h3>
                             <p>
-                                WrenchBoard platform connects you with quality service to deliver your project with ease.
+                            All you need for a family to get moving with rewards and more. Plan activities and booster family interactions. 
                             </p>
                         </div>
                         <div className="row">
@@ -20,8 +19,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Create your projects</h5>
-                                    <p>from complex to most basic task as targetted offering or market place posting</p>
+                                    <h5 className="title">Organize Chores</h5>
+                                    <p>Simple one-time tasks to repeated tasks or promise of performance or set goals.</p>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-6">
@@ -29,8 +28,9 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Hire experts</h5>
-                                    <p>from reviewed profiles, accept interest in your project from qualified members.</p>
+                                    <h5 className="title">Sibling Activities</h5>
+                                    <p>Wrenchboard allows family members to create product connections with educational content with reward tools.
+                                    </p>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-6">
@@ -38,8 +38,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Monitor Progress</h5>
-                                    <p>Monitor work progress and track performance with real time tools from your account</p>
+                                    <h5 className="title">Personalized Wallet</h5>
+                                    <p>Individual wallet with parental control and guidance. Money education to increase values.</p>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-6">
@@ -47,8 +47,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Get Pay </h5>
-                                    <p>Pay: Make payment easily and securely by milestones or project completion.</p>
+                                    <h5 className="title">Games & More </h5>
+                                    <p>More opportunities to learn with games or the artificial intelligence library and shared material.</p>
                                 </div>
                             </div>
                             <div className="col-lg-12">

src/components/HomeOne/index.js

@@ -3,23 +3,29 @@ import useToggle from '../../Hooks/useToggle';
 import BackToTop from '../BackToTop';
 import Drawer from '../Mobile/Drawer';
 import BlogHomeOne from './BlogHomeOne';
-import FaqHomeOne from './FaqHomeOne';
 import FeaturesHomeOne from './FeaturesHomeOne';
 import FooterHomeOne from './FooterHomeOne';
 import HeroHomeOne from './HeroHomeOne';
 import HomeOneHeader from './HomeOneHeader';
-//import PricingHomeOne from './PricingHomeOne';
-import ProjectHomeOne from './ProjectHomeOne';
 import ServicesHomeOne from './ServicesHomeOne';
-import TeamHomeOne from './TeamHomeOne';
-import TestimonialHomeOne from './TestimonialHomeOne';
-//import TrafficHomeOne from './TrafficHomeOne';
+import TrafficHomeOne from './TrafficHomeOne';
 import TrafficHomeTwo from './TrafficHomeTwo';
-import WrenchBoardHome from './WrenchBoardHome';
-import RecentJobsOne from './RecentJobsOne';
-import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 import FeaturedScreen from './FeaturedScreen';
+import AfterHero from './AfterHero';
+import NextAfterHero from './NextAfterHero';
+
+//import FaqHomeOne from './FaqHomeOne';
+//import PricingHomeOne from './PricingHomeOne';
+//import ProjectHomeOne from './ProjectHomeOne';
+//import TeamHomeOne from './TeamHomeOne';
+//import TestimonialHomeOne from './TestimonialHomeOne';
+//mport WrenchBoardHome from './WrenchBoardHome';
+//import RecentJobsOne from './RecentJobsOne';
+//import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 //import BlogData from './../../Services/BlogData';
+// import ServicesHomeEight from '../HomeEight/ServicesHomeEight';
+
+
 
 function HomeOne() {
     const [drawer, drawerAction] = useToggle(false);
@@ -29,21 +35,24 @@ function HomeOne() {
             <Drawer drawer={drawer} action={drawerAction.toggle} />
             {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             <HomeOneHeader action={drawerAction.toggle} />
-            <HeroHomeOne />
-            <ServicesHomeOne />
-            {/*<RecentJobsOne />*/}
+            <HeroHomeOne />    
+            <AfterHero />
+            {/*<NextAfterHero />*/}
             <FeaturesHomeOne />
-            {/*<FaqHomeOne />*/}
-            {/*<TrafficHomeOne />*/}
+            <ServicesHomeOne />
+            <TrafficHomeOne />
             <TrafficHomeTwo />
             <FeaturedScreen />
+            <BlogHomeOne />
+            <FooterHomeOne />
+            <BackToTop />
+            
+            { /*   <RecentJobsOne /> JOBS ON SITE GONE*/}
+            {/*<FaqHomeOne />*/}
             {/*<TestimonialHomeOne />*/}
             {/*<TeamHomeOne />*/}
             {/*<PricingHomeOne />*/}
-            <BlogHomeOne />
-            {/*<ProjectHomeOne />*/}
-            <FooterHomeOne />
-            <BackToTop />
+            {/*<ProjectHomeOne /> */}
         </>
     );
 }

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>