added styles

Fixed typo
Merge branch 'added-about-app-component' of WrenchBoard/WrenchBoardMainSite into master
2024-02-01 20:59:25 +01:00 · 2024-02-01 20:13:16 +01:00 · 2024-02-01 18:52:08 +00:00 · 2024-02-01 18:55:09 +01:00 · 2024-02-01 17:06:47 +00:00 · 2024-02-01 18:04:39 +01:00
84 changed files with 1175 additions and 288 deletions
@@ -18,6 +18,8 @@
 .env.test.local
 .env.production.local

+.idea
+

 npm-debug.log*
 yarn-debug.log*
@@ -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",
@@ -49,6 +49,16 @@
    </noscript>

    <title>WrenchBoard</title>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WB8G0ZD483"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-WB8G0ZD483');
+    </script>
+
  </head>

  <body>
@@ -56,29 +66,29 @@
    <div id="root"></div>
  </body>

-  <script>
-    (function (i, s, o, g, r, a, m) {
-      i["GoogleAnalyticsObject"] = r;
-      (i[r] =
-        i[r] ||
-        function () {
-          (i[r].q = i[r].q || []).push(arguments);
-        }),
-        (i[r].l = 1 * new Date());
-      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-      a.async = 1;
-      a.src = g;
-      m.parentNode.insertBefore(a, m);
-    })(
-      window,
-      document,
-      "script",
-      "https://www.google-analytics.com/analytics.js",
-      "ga"
-    );
-    ga("create", "UA-54829827-4", "auto");
-    ga("send", "pageview");
-  </script>
+<!--  <script>-->
+<!--    (function (i, s, o, g, r, a, m) {-->
+<!--      i["GoogleAnalyticsObject"] = r;-->
+<!--      (i[r] =-->
+<!--        i[r] ||-->
+<!--        function () {-->
+<!--          (i[r].q = i[r].q || []).push(arguments);-->
+<!--        }),-->
+<!--        (i[r].l = 1 * new Date());-->
+<!--      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);-->
+<!--      a.async = 1;-->
+<!--      a.src = g;-->
+<!--      m.parentNode.insertBefore(a, m);-->
+<!--    })(-->
+<!--      window,-->
+<!--      document,-->
+<!--      "script",-->
+<!--      "https://www.google-analytics.com/analytics.js",-->
+<!--      "ga"-->
+<!--    );-->
+<!--    ga("create", "UA-54829827-4", "auto");-->
+<!--    ga("send", "pageview");-->
+<!--  </script>-->

  <script>
    var LHC_API = LHC_API || {};
@@ -105,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>
@@ -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": ".",
@@ -1,7 +1,19 @@
 import Routes from './Routes';
+import { Redirect, useLocation } from 'react-router-dom';
+

 function App() {
-    return <Routes />;
+    const {pathname} = useLocation()
+
+    return (
+        <>
+        {pathname.startsWith('/@') ? 
+        <Redirect to='/app' />
+        :
+        <Routes />
+        }
+        </>
+    );
 }

 export default App;
@@ -25,6 +25,7 @@ import Privacy from './components/Service/Privacy';
 import Terms from './components/Service/Terms';
 import FAQ from './components/FAQ/Index';
 import Lnd from './components/lnd/Lnd';
+import AppDownload from './components/AppDownload/AppDownload';

 function Routes() {
    const [loading, setLoading] = useState(true);
@@ -44,28 +45,27 @@ function Routes() {
                </div>
            )}
            <div className={`appie-visible ${loading === false ? 'active' : ''}`}>
-                <Router>
-                    <ScrollToTop>
-                        <Switch>
-                            <Route exact path="/" component={HomeOne} />
-                            <Route exact path="/eoffer" component={HomeOne} />
-                            {/*<Route exact path="/news" component={News} />*/}
-                            <Route exact path="/blog" component={Blog} />
-                            <Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
-                            <Route exact path="/use-cases" component={UseCases} />
-                            {/*<Route exact path="/news/single-news" component={SingleNews} />*/}
-                            <Route exact path="/service" component={Service} />
-                            <Route exact path="/terms" component={Terms} />
-                            <Route exact path="/privacy" component={Privacy} />
-                            <Route exact path="/about-us" component={AboutUs} />
-                            <Route exact path="/contact" component={Contact} />
-                            <Route exact path="/faq" component={FAQ} />
-                            <Route exact path="/error" component={Error} />
-                            <Route exact path="/lnd/*" component={Lnd} />
-                            <Route component={Error} />
-                        </Switch>
-                    </ScrollToTop>
-                </Router>
+                <ScrollToTop>
+                    <Switch>
+                        <Route exact path="/" component={HomeOne} />
+                        <Route exact path="/eoffer" component={HomeOne} />
+                        {/*<Route exact path="/news" component={News} />*/}
+                        <Route exact path="/blog" component={Blog} />
+                        <Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
+                        <Route exact path="/use-cases" component={UseCases} />
+                        {/*<Route exact path="/news/single-news" component={SingleNews} />*/}
+                        <Route exact path="/service" component={Service} />
+                        <Route exact path="/terms" component={Terms} />
+                        <Route exact path="/privacy" component={Privacy} />
+                        <Route exact path="/about-us" component={AboutUs} />
+                        <Route exact path="/contact" component={Contact} />
+                        <Route exact path="/faq" component={FAQ} />
+                        <Route exact path="/error" component={Error} />
+                        <Route exact path="/lnd/*" component={Lnd} />
+                        <Route exact path="/app" component={AppDownload} />
+                        <Route component={Error} />
+                    </Switch>
+                </ScrollToTop>
            </div>
        </>
    );
@@ -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;
+}
@@ -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;
@@ -3227,6 +3229,63 @@ p {
  background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
 }

+.appie-modern-design .icon i {
+  height: 26px;
+  width: 26px;
+  text-align: center;
+  line-height: 26px;
+  border-radius: 50%;
+  background: purple;
+  color: #fff;
+  font-size: 14px;
+  box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
+}
+
+/* .modern_ui_section{
+  margin-top: 100px;
+} */
+.modern_ui_section .section_sub_title{
+  font-size: 30px;
+  color: purple;
+}
+.modern_ui_section .ui_images{
+  border-radius: 100%;
+  background-color: #fff;
+  width: auto;
+  height: auto;
+  padding: 30px 10px;
+}
+.modern_ui_section .right_img{
+  left: -60px;
+  top: -20px;
+}
+.modern_ui_section .left_img{
+  width: 60%;
+}
+
+.modern_ui_section .left_img img{
+  border-radius: 10px;
+}
+.modern_ui_section .right_img{
+  width: 40%;
+}
+.modern_ui_section .right_img img {
+  position: relative;
+  z-index: 2;
+}
+.modern_ui_section .right_img .right_img_one{
+  width: 120px;
+  height: auto;
+}
+.modern_ui_section .right_img .right_img_three{
+  left: -20px;
+}
+@media only screen and (min-width: 0px) and (max-width: 500px) {
+  .modern_ui_section .right_img{
+    left: -30px;
+    top: -20px;
+  }
+}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .traffic-btn {
    margin-top: 30px;
@@ -4894,6 +4953,28 @@ p {
  position: relative;
 }

+.service-item{
+  background: transparent;
+  border-radius: 6px;
+  padding: 30px 10px;
+}
+
+.service-item .icon {
+  display: inline-block;
+  text-align: center;
+
+  border-radius: 20px;
+  height: 80px;
+  line-height: 70px;
+  margin-bottom: 10px;
+  position: relative;
+  width: 80px;
+}
+
+.service-item h4 {
+  font-size: 20px;
+}
+
 .tags a {
  display: inline-block;
  height: 34px;
@@ -8457,4 +8538,90 @@ blockquote cite {
  animation-timing-function: linear;
  animation-duration: .5s;
  animation-fill-mode: forwards; */
+}
+
+
+
+/*
+LND PAGE STYLE STARTS HERE
+*/
+
+/* 1.0 BANNER SECTION */
+.banner_section{
+  background: linear-gradient(to left top, #0e1133, #15233d);
+}
+.banner_shape1{
+  left: 0;
+  top: 50%;
+  transform: rotate(45deg);
+}
+.banner_shape2{
+  top: 40%;
+  left: 90%;
+  transform: rotate(180deg);
+}
+.banner_shape3{
+  bottom: 0;
+  right: 0;
+  transform: rotate(40deg);
+}
+.banner_text h1{
+  font-size: 50px;
+  line-height: normal;
+}
+.banner_text p{
+  font-size: 16px;
+}
+.yt_video .play-button{
+  cursor: pointer;
+}
+.yt_video .play_btn{
+  width: 50px;
+  height: 50px;
+  background-color: rgba(255,255,255,0.1);
+}
+.yt_video .play_btn img{
+  background-color: rgba(255,255,255,0.3);
+}
+
+@media (max-width: 767px) {
+  .banner_text h1{
+    font-size: 20px;
+  }
+  .banner_images img{
+    width: 80%;
+  }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+  .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;
 }
@@ -107,6 +107,27 @@
  margin-top: -20px;
 }

+.app-download.options{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.app-download.options .main-btn {
+  color: #0e1133;
+  background-color: #fff;
+  border: 3px solid #3EAFCC;
+  padding: 2px 112px;
+  letter-spacing: 1px;
+}
+
+.app-download.appie-hero-content h5 {
+    color: #51B5D0;
+    /* border-color: #fff; */
+}
+
@media only screen and (min-width: 300px) and (max-width: 1024px) {
  .testimonial-about-slider-active .testimonial-box {
    box-shadow: none;
@@ -121,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;
+}
@@ -0,0 +1,11 @@
+import HomeOneHeader from '../HomeOne/HomeOneHeader';
+import AppDownloadDetails from './AppDownloadDetails';
+
+export default function AppDownload() {
+  return (
+    <>
+      <HomeOneHeader showLogoOnly={true} />
+      <AppDownloadDetails />
+    </>
+  )
+}
@@ -0,0 +1,78 @@
+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 CustomSlider from '../customSlider/CustomSlider';
+
+const AppDownloadDetails = () => {
+    return (
+        <>
+            <section className="appie-hero-area">
+                <div className="container">
+                    <div className="row align-items-center">
+                        <div className="col-lg-6">
+                            <div className="app-download appie-hero-content appie-hero-content-6">
+                                <h5 className='title'>Download from</h5>
+                            <div className='flex app-download options'>
+                                <ul>
+                                    <li className=''>
+                                        <a className="item-2" target='_blank' href={process.env.REACT_APP_APPLE_APP}>
+                                            <i className="fab fa-apple"></i>
+                                            <span>
+                                                Available on the <span>App Store</span>
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li className=''>
+                                        <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                                            <i className="fab fa-google-play"></i>
+                                            <span>
+                                                Available on the <span>Google Play</span>
+                                            </span>
+                                        </a>
+                                    </li>
+                                </ul>
+                                <h5>OR</h5>
+                                <a target='_blank' href={process.env.REACT_APP_DASH_URL_SIGNUP} className='main-btn'>
+                                    Register Online
+                                </a>
+                            </div>
+                                
+                                <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>
+                            </div>
+                        </div>
+                        <div className="col-lg-6">
+                            <div className="appie-hero-thumb">
+                                <div
+                                    className="thumb wow animated fadeInUp"
+                                    data-wow-duration="2000ms"
+                                    data-wow-delay="200ms"
+                                >
+                                    {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
+                                    <div style={{ width: '350px', margin: 'auto' }}>
+                                        <CustomSlider
+                                            images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
+                                            speed='5'
+                                            indicatorColor='#333'
+                                        />
+                                    </div>
+                                </div>
+                                <div
+                                    className="thumb-2 wow animated fadeInRight"
+                                    data-wow-duration="2000ms"
+                                    data-wow-delay="600ms"
+                                >
+                                    <img src={heroThumbTwo} alt="" width="100%" height="100%" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}
+
+export default AppDownloadDetails
@@ -19,12 +19,12 @@ function Blog({ blogItem, imgUrl, loader }) {

  const headerLoaderStyles = {
    "--text-container-width": "300px",
-    "--text-container-height": "34px",
+    "--text-container-height": "18px",
  };

  const bodyTextLoaderStyles = {
    "--text-container-width": "770px",
-    "--text-container-height": "150px",
+    "--text-container-height": "15px",
  };

  return (
@@ -0,0 +1,81 @@
+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'
+
+export default function FeaturedScreen() {
+  
+    const screen_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        center: true,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                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" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
@@ -20,7 +20,7 @@ function FooterHomeOne({ className }) {
                                    </a>
                                </div>
                                <p>
-                                    {`It is simple. You can set goals, task, or anything that need to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
+                                    {`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">
                                    Read More <i className="fal fa-arrow-right" />
@@ -95,12 +95,12 @@ function FooterHomeOne({ className }) {
                                    </li>
                                    <li>
                                        <a href="#">
-                                            <i className="fal fa-phone" />  404 855-7966
+                                            <i className="fal fa-phone" />  404-855-7966
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
-                                            <i className="fal fa-map-marker-alt" />Atlanta,GA 30339 
+                                            <i className="fal fa-map-marker-alt" />Atlanta, GA 30339 
                                        </a>
                                    </li>
                                </ul>
@@ -65,7 +65,7 @@ function HeroHomeOne() {
                  data-wow-duration="2000ms"
                  data-wow-delay="600ms"
                >
-                  <img src={heroThumbTwo} alt="" />
+                  <img src={heroThumbTwo} alt="" width="100%" height="100%" />
                </div>
              </div>
            </div>
@@ -4,7 +4,7 @@ import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'

-function HomeOneHeader({ action }) {
+function HomeOneHeader({ action, showLogoOnly = false }) {
  var site = getConfig()[0];
  useEffect(() => {
    StickyMenu();
@@ -21,27 +21,30 @@ function HomeOneHeader({ action }) {
                </a>
              </div>
            </div>
-            <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
-              <div className="appie-header-main-menu">
-                <Navigation />
-              </div>
-            </div>
-            <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
-              <div className="appie-btn-box text-right">
-                <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                  <i className="fal fa-user" /> Login
-                </a>
-                <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
-                  Get Started
-                </a>
-                <div
-                  onClick={(e) => action(e)}
-                  className="toggle-btn ml-30 canvas_open d-lg-none d-block"
-                >
-                  <i className="fa fa-bars" />
+
+            {!showLogoOnly && <>
+              <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
+                <div className="appie-header-main-menu">
+                  <Navigation />
                </div>
              </div>
-            </div>
+              <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
+                <div className="appie-btn-box text-right">
+                  <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                    <i className="fal fa-user" /> Login
+                  </a>
+                  <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                    Get Started
+                  </a>
+                  <div
+                    onClick={(e) => action(e)}
+                    className="toggle-btn ml-30 canvas_open d-lg-none d-block"
+                  >
+                    <i className="fa fa-bars" />
+                  </div>
+                </div>
+              </div>
+            </>}
          </div>
        </div>
      </div>
@@ -1,13 +1,14 @@
-import React from "react";
-import IconOne from "../../assets/images/icon/account_login.png";
-import IconTwo from "../../assets/images/icon/task.png";
-import IconThree from "../../assets/images/icon/target.png";
-import IconFour from "../../assets/images/icon/reward.png";
+import React from 'react';
+import IconOne from '../../assets/images/icon/reward.png';
+import IconTwo from '../../assets/images/icon/assign-chores.png';
+import IconThree from '../../assets/images/icon/financial-education.png';
+import IconFour from '../../assets/images/icon/family-connect.png';
+import Main from '../lnd/LndParts/Design/Main';

 function ServiceItem({ icon, title, description, index }) {
  return (
    <div
-      className="appie-single-service text-center mt-30 wow animated fadeInUp"
+      className="service-item text-center mt-30 wow animated fadeInUp"
      data-wow-duration="2000ms"
      data-wow-delay={`${200 * (index + 1)}ms`}
      style={{ cursor: "default" }}
@@ -22,40 +23,19 @@ function ServiceItem({ icon, title, description, index }) {
 }

 function ServicesHomeOne({ className }) {
-  const serviceTitle = "Set Goals and Rewards to Inspire";
-  const serviceItems = [
-    {
-      icon: IconOne,
-      title: "Free Account",
-      description: "Join WrenchBoard. Get your free account.",
-    },
-    {
-      icon: IconTwo,
-      title: "Set Goals",
-      description: "Suggest or find what you want to get rewarded for.",
-    },
-    {
-      icon: IconThree,
-      title: "Complete",
-      description: "Complete task, and notify assigner with ease.",
-    },
-    {
-      icon: IconFour,
-      title: "Reward",
-      description: "Task completed. Find your reward.",
-    },
-  ];

  return (
    <section
-      className={`appie-service-area pt-10 pb-50 ${className}`}
+      className={`appie-service-area pt-50 pb-50 ${className}`}
      id="service"
    >
-      <div className="container">
+      {/* <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">{serviceTitle}</h3>
+              <h3 className="appie-title">
+              Set Chores, Set Goals and <br /> Rewards Accomplishments
+              </h3>
            </div>
          </div>
        </div>
@@ -71,9 +51,35 @@ function ServicesHomeOne({ className }) {
            </div>
          ))}
        </div>
-      </div>
+      </div> */}
+      
+      <Main />
    </section>
  );
 }

 export default ServicesHomeOne;
+
+const serviceTitle = `Set Chores, Set Goals and Rewards Accomplishments`;
+const serviceItems = [
+  {
+    icon: IconOne,
+    title: 'Reward Goals Met',
+    description: 'Set goals together and reward accomplishment',
+  },
+  {
+    icon: IconTwo,
+    title: 'Assign Regular Chores',
+    description: 'Organize essential regular chores to be done',
+  },
+  {
+    icon: IconThree,
+    title: 'Financial Education',
+    description: 'Get Kids start early on money management',
+  },
+  {
+    icon: IconFour,
+    title: 'Family Connect',
+    description: 'Connect family, share accomplishments with friends',
+  },
+];
@@ -43,7 +43,7 @@ function TrafficHomeOne() {
                data-wow-delay="200ms"
                src={thumb}
                alt=""
-                style={{ zIndex: "0", minHeight: "300", minWidth: "400" }}
+                style={{ zIndex: "0", minHeight: "300px", minWidth: "400px", width: "100%" }}
              />
            </div>
          </div>
@@ -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 />*/}
@@ -9,9 +9,9 @@ function Navigation() {
                    <Link to="/">Home</Link>
                </li>
                <li>
-                    <Link to="/service">Services</Link>
+                    <Link to="/about-us">About</Link>
                </li>
-                <li>
+                {/* <li>
                    <a href="#">
                        Resources <i className="fal fa-angle-down" />
                    </a>
@@ -26,8 +26,7 @@ function Navigation() {
                            <Link to="/faq">FAQs</Link>
                        </li>
                    </ul>
-                </li>
-               
+                </li> */}
            </ul>
        </>
    );
@@ -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() {
@@ -23,6 +24,7 @@ function UseCases() {
                    { link: '/use-cases', title: 'Use Cases' },
                ]}
            />
+            <AboutApp />
            <section className="blogpage-section">
                <div className="container">
                    <div className="row">
@@ -39,6 +39,7 @@ function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
            src={image}
            alt="image"
            style={{
+              width: "100%",
              minWidth: "100%",
              maxHeight: "695px",
              height: "100%",
@@ -39,6 +39,8 @@ import Faq from './LndParts/Faq/Main'
 import Download from './LndParts/Download/Main'
 import Story from './LndParts/Story/Main'

+import localImgLoad from '../../lib/localImgLoad'
+

 const Lnd = ({setnavbar,setfooter,setbrdcum}) => {

@@ -133,65 +135,67 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
            </div>
        </header>
        </div>  */}
-            <section className="banner_section homedark-banner">
+            <section className="banner_section homedark-banner min-vh-100">
                <div className="container">
-                    <div className="row">
-                        <span className="banner_shape1"> <img src="assets/images/banner-shape-one1.png" alt="image" /> </span>
-                        <span className="banner_shape2"> <img src="assets/images/banner-shape2two.png" alt="image" /> </span>
-                        <span className="banner_shape3"> <img src="assets/images/banner-shapethree3.png" alt="image" /> </span>
+                    <div className="row position-relative">
+                        <span className="position-absolute banner_shape1"> <img src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape2"> <img src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape3"> <img src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>

-                        <div className="col-lg-8 col-md-12 mx-auto"  data-aos="fade-right" data-aos-duration="1500">
-                            <div className="banner_text">
-                                <h1>Best way to manage your customers easily.</h1>
-                                <p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.
-                                </p>
+                        <div className="col-12 col-lg-6 mx-auto text-center"  data-aos="fade-right" data-aos-duration="1500">
+                            <div className="banner_text my-3 p-4">
+                                <h1 className='text-white my-2'>Best way to manage your customers easily.</h1>
+                                <p className='text-white my-2'>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.</p>
                            </div>
                            <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
                                <div className="thumbnil">
                                    <a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
-                        <span className="play_btn">
-                            <img src="assets/images/play_icon.png" alt="image" />
-                            <div className="waves-block">
-                            <div className="waves wave-1"></div>
-                            <div className="waves wave-2"></div>
-                            <div className="waves wave-3"></div>
-                            </div>
-                        </span>
+                                        {/* <span className="play_btn position-relative">
+                                            <img src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
+                                            <div className="waves-block">
+                                                <div className="waves wave-1"></div>
+                                                <div className="waves wave-2"></div>
+                                                <div className="waves wave-3"></div>
+                                            </div>
+                                        </span> */}
+                                        <span className="play_btn position-relative rounded-circle d-flex justify-content-center align-items-center">
+                                            <img src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
+                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
-                <div className="container-fluid"  data-aos="fade-in" data-aos-duration="1500">
+                <div className="container-fluid p-3 p-lg-5"  data-aos="fade-in" data-aos-duration="1500">
                    <div className="banner_images">
-                        <div className="row d-flex justify-content-center">
-                            <div className="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
-                                <div className="banner_screen screen1">
-                                    <img className="moving_position_animatin" src="assets/images/hero-image-5.png" alt="image" />
+                        <div className="img-con d-block d-sm-flex justify-content-around align-items-center gap-5">
+                            <div className="col-lg-2 d-none d-lg-block">
+                                <div className="banner_screen screen1 text-center">
+                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
                                </div>
                            </div>

-                            <div className="col-md-4 col-lg-2 col-sm-4 col-xs-4">
-                                <div className="banner_screen screen2">
-                                    <img className="moving_animation" src="assets/images/hero-image-4.png" alt="image" />
+                            <div className="col-12 col-sm-4 col-lg-2">
+                                <div className="banner_screen screen2 text-center">
+                                    <img className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
                                </div>
                            </div>

-                            <div className="col-md-4 col-lg-3 col-sm-4 col-xs-4">
-                                <div className="banner_screen screen3">
-                                    <img className="moving_position_animatin" src="assets/images/hero-image-1.png" alt="image" />
+                            <div className="my-4 my-md-0 col-12 col-sm-4 col-lg-3">
+                                <div className="banner_screen screen3 text-center">
+                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
                                </div>
                            </div>

-                            <div className="col-md-4 col-lg-2 col-sm-4 col-xs-4">
-                                <div className="banner_screen screen4">
-                                    <img className="moving_animation" src="assets/images/hero-image-2.png" alt="image" />
+                            <div className="col-12 col-sm-4 col-lg-2">
+                                <div className="banner_screen screen4 text-center">
+                                    <img className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
                                </div>
                            </div>
-                            <div className="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
-                                <div className="banner_screen screen5">
-                                    <img className="moving_position_animatin" src="assets/images/hero-image-3.png" alt="image" />
+                            <div className="col-lg-2 d-none d-lg-block">
+                                <div className="banner_screen screen5 text-center">
+                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
                                </div>
                            </div>
                        </div>
@@ -204,14 +208,14 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                    <ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
                        <li>
                            <a href="#" className="app_store">
-                                <img className="blue_img" src="assets/images/appstore_blue.png" alt="image" />
-                                <img className="white_img" src="assets/images/appstore_white.png" alt="image" />
+                                <img className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
+                                <img className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
                            </a>
                        </li>
                        <li>
                            <a href="#">
-                                <img className="blue_img" src="assets/images/googleplay_blue.png" alt="image" />
-                                <img className="white_img" src="assets/images/googleplay_white.png" alt="image" />
+                                <img className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
+                                <img className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
                            </a>
                        </li>
                    </ul>
@@ -223,7 +227,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
                            <li>
                                <div className="icon">
-                                    <img src="assets/images/download-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/download-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
@@ -235,7 +239,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
                            <li>
                                <div className="icon">
-                                    <img src="assets/images/followers-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/followers-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
@@ -247,7 +251,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
                            <li>
                                <div className="icon">
-                                    <img src="assets/images/reviews-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/reviews-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
@@ -259,7 +263,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
                            <li>
                                <div className="icon">
-                                    <img src="assets/images/countries-dark.png" alt="image" />
+                                    <img src={localImgLoad('images/countries-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
@@ -282,7 +286,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                <div className="col-md-4">
                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
                                        <div className="image">
-                                            <img src="assets/images/features1.png" alt="image" />
+                                            <img src={localImgLoad('images/features1.png')} alt="image" />
                                        </div>
                                        <div className="text">
                                            <h4>Secure data</h4>
@@ -294,7 +298,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                <div className="col-md-4">
                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
                                        <div className="image">
-                                            <img src="assets/images/features2.png" alt="image" />
+                                            <img src={localImgLoad('images/features2.png')} alt="image" />
                                        </div>
                                        <div className="text">
                                            <h4>Automate everything</h4>
@@ -306,7 +310,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                <div className="col-md-4">
                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
                                        <div className="image">
-                                            <img src="assets/images/features3.png" alt="image" />
+                                            <img src={localImgLoad('images/features3.png')} alt="image" />
                                        </div>
                                        <div className="text">
                                            <h4>Secure data</h4>
@@ -7,95 +7,51 @@ 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>
    </>
  )
 }
@@ -1,4 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
+import localImgLoad from '../../../../lib/localImgLoad'
+
 import img1 from '../../../../assets/images/modern01.png'
 import img2 from '../../../../assets/images/secure_data.png'
 import img3 from '../../../../assets/images/modern02.png'
@@ -6,49 +8,88 @@ import img4 from '../../../../assets/images/modern03.png'


 const Main = ({gredient}) => {
+
+    const [activeImg, setActiveImg] = useState(list[0].name)
+
+    const changeActiveImg = (name) => {
+        setActiveImg(name)
+    }
+
  return (
    <>
        <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
            {gredient &&
-            <div className="modernui_section_bg modernui-gredient"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
+            <div className="modernui_section_bg modernui-gredient"> 
+                <img src="assets/images/section-bg.png" alt="image"/> 
+            </div>
+            }
            <div className="container">
-                <div className="row">
+                <div className="row align-items-center">
                    <div className="col-lg-6">
-                        <div className="ui_text">
-                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                            <h2>Beautiful design with <span>modern UI</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.
-                            </p>
-                        </div>
-                        <ul className="design_block">
-                            <li data-aos="fade-up" data-aos-duration="1500">
-                            <h4>Carefully designed</h4>
-                            <p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
-                            </li>
-                            <li data-aos="fade-up" data-aos-duration="1500">
-                            <h4>Seamless Sync</h4>
-                            <p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
-                            </li>
-                            <li data-aos="fade-up" data-aos-duration="1500">
-                            <h4>Access Drive</h4>
-                            <p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
-                                setting.</p>
-                            </li>
-                        </ul>
+                        <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>
+                                <p className=''>
+                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
+                                </p>
+                            </div>
+                            <div className="row">
+                            {list?.map(({ icon, header, paragraph, name }, idx) => (
+                                <div className="col-12 mb-20" 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>
+                                    </div>
+                                </div>
+                            ))}
+                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
-                        <div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
-                        <div className="left_img">
-                            <img className="moving_position_animatin" src={img1} alt="image" />
-                        </div>
-                        <div className="right_img">
-                            <img className="moving_position_animatin" src={img2} alt="image" />
-                            <img className="moving_position_animatin" src={img3} alt="image" />
-                            <img className="moving_position_animatin" src={img4} alt="image" />
-                        </div>
+                        <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} 
+                                            src={
+                                                activeImg == 'reward-goals' ? localImgLoad(`images/home/box-reward.png`)
+                                                :
+                                                activeImg == 'assign-chores' ? localImgLoad(`images/home/box-chores.png`)
+                                                :
+                                                activeImg == 'financial-edu' ? localImgLoad(`images/home/box-financial.png`)
+                                                :
+                                                activeImg == 'family-connect' ? localImgLoad(`images/home/box-family.png`)
+                                                :
+                                                null
+                                            } 
+                                            alt="image" 
+                                        />
+                                    </div>
+                                    <img 
+                                        className="moving_position_animatin right_img_three position-relative" 
+                                        src={localImgLoad(`images/home/wrench-side-logo-1.png`)} 
+                                        alt="image" 
+                                    />
+                                </div>
+                            </div>
                        </div>
                    </div>
                </div>
@@ -58,4 +99,33 @@ const Main = ({gredient}) => {
  )
 }

-export default Main
+export default Main
+
+
+
+const list = [
+      {
+        icon: 'fal fa-check',
+        header: 'Reward Goals Met',
+        paragraph: 'Set goals together and reward accomplishment',
+        name: 'reward-goals',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Assign Regular Chores',
+        paragraph: 'Organize essential regular chores to be done',
+        name: 'assign-chores',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Financial Education',
+        paragraph: 'Get Kids start early on money management',
+        name: 'financial-edu',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Family Connect',
+        paragraph: 'Connect family, share accomplishments with friends',
+        name: 'family-connect',
+      },
+    ]
@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 import App from './App';
 import './assets/css/bootstrap.min.css';
 import './assets/css/custom-animated.css';
@@ -12,7 +14,9 @@ import './assets/css/style.css';

 ReactDOM.render(
    <React.StrictMode>
-        <App />
+        <Router>
+            <App />
+        </Router>
    </React.StrictMode>,
    document.getElementById('root')
 );
@@ -0,0 +1,2 @@
+const localImgLoad = (location) => require(`../assets/${location}`);
+export default localImgLoad
Author	SHA1	Message	Date
Ebube	eab01068d2	added styles	2024-02-01 20:59:25 +01:00
Ebube	d49a71b97a	Fixed typo	2024-02-01 20:13:16 +01:00
tokslaw	c0b77f911f	Merge branch 'added-about-app-component' of WrenchBoard/WrenchBoardMainSite into master	2024-02-01 18:52:08 +00:00
Ebube	46341abf2a	added text	2024-02-01 18:55:09 +01:00
ameye	7f8fc1086f	Merge branch 'added-about-app-component' of WrenchBoard/WrenchBoardMainSite into master	2024-02-01 17:06:47 +00:00
Ebube	a312984df8	added about app component	2024-02-01 18:04:39 +01:00
ameye	490492bd0f	Merge branch 'new-slider-section' of WrenchBoard/WrenchBoardMainSite into master	2024-02-01 11:32:49 +00:00
victorAnumudu	e78561c93f	slider section implemented	2024-02-01 07:54:48 +01:00
victorAnumudu	e13d973b30	added new slide section	2024-02-01 00:12:36 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	bd3d945f55	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite	2024-01-31 16:31:57 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	62e7cda35d	"react-owl-carousel": "^2.3.3",	2024-01-31 16:30:11 -05:00
ameye	e11c35e49b	Merge branch 'slider-images' of WrenchBoard/WrenchBoardMainSite into master	2024-01-31 19:54:41 +00:00
victorAnumudu	9e23fd83a8	added slider images	2024-01-31 19:32:18 +01:00
ameye	537e639a65	Merge branch 'logo-addition' of WrenchBoard/WrenchBoardMainSite into master	2024-01-31 17:01:17 +00:00
victorAnumudu	02075a95c0	images added for each selected item	2024-01-31 17:20:41 +01:00
victorAnumudu	2873b22183	added logo image	2024-01-31 16:32:59 +01:00
ameye	7b01bea019	Merge branch 'image-addition' of WrenchBoard/WrenchBoardMainSite into master	2024-01-31 01:21:36 +00:00
victorAnumudu	6dd5dbc7b2	added images for home page	2024-01-30 19:16:32 +01:00
ameye	f8acc0a29e	Merge branch 'section-adjustment' of WrenchBoard/WrenchBoardMainSite into master	2024-01-30 12:34:35 +00:00
victorAnumudu	d175ef8922	image removal and proper text displayed	2024-01-30 06:04:55 +01:00
ameye	751bcd6c5d	Merge branch 'section-addition' of WrenchBoard/WrenchBoardMainSite into master	2024-01-28 23:10:06 +00:00
victorAnumudu	8a4c7d92e8	Merge branch 'master' into section-addition	2024-01-28 07:34:48 +01:00
victorAnumudu	0c4e464c5e	added a new section on home page	2024-01-28 07:32:27 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	3586b01756	google anayltical	2024-01-27 14:47:37 -05:00
ameye	715972dbde	Merge branch 'modified-services-text' of WrenchBoard/WrenchBoardMainSite into master	2024-01-22 18:28:24 +00:00
Ebube	9cc252b2cd	adjusted spacing points for the service feature	2024-01-19 15:37:08 +01:00
ameye	a1b56a0b81	Merge branch 'modified-services-text' of WrenchBoard/WrenchBoardMainSite into master	2024-01-13 20:19:02 +00:00
Ebube	87ea20bde8	update nav items	2024-01-13 20:56:01 +01:00
Ebube	0ebbc26104	added new images and text to the services sections	2024-01-13 20:47:24 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e323168927	no kid image	2024-01-13 12:04:00 -05:00
ameye	2224472046	Merge branch 'address-fix' of WrenchBoard/WrenchBoardMainSite into master	2024-01-12 13:21:32 +00:00
victorAnumudu	87e7aa7270	sentence corrected	2024-01-11 22:06:03 +01:00
victorAnumudu	53da8d6992	fixed address space	2024-01-10 07:24:18 +01:00
ameye	64f69eff72	Merge branch 'adding-app-download-details' of WrenchBoard/WrenchBoardMainSite into master	2023-12-21 05:58:55 +00:00
ebube	63cb665140	added a quick style change	2023-12-20 21:18:55 -08:00
ebube	11b4713db5	added details to app download page	2023-12-20 21:15:27 -08:00
ameye	f109e89f96	Merge branch 'app-download' of WrenchBoard/WrenchBoardMainSite into master	2023-12-20 19:51:33 +00:00
victorAnumudu	c9ed414753	added app download route	2023-12-20 18:29:22 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2a7643e8b2	download	2023-12-12 15:49:43 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	1a5644f2df	wrench-icon.png	2023-11-29 17:31:56 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	209c75ed2e	new images	2023-11-19 16:30:40 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	9684e36427	job-interest	2023-11-14 13:14:07 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	96d8708b5a	task-waiting	2023-11-14 12:40:03 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	7946e0e09c	past due	2023-11-14 11:42:29 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	dc755e9db1	family-login	2023-11-14 11:20:12 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	cf0206da44	waiting task	2023-11-12 14:06:04 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	7a219cc888	main app image	2023-11-11 05:32:12 -05:00
ameye	5cdc08341f	Merge branch 'banner-section' of WrenchBoard/WrenchBoardMainSite into master	2023-11-04 18:25:38 +00:00
victorAnumudu	601c3b4da0	banner section layout	2023-11-04 17:41:44 +01:00
victorAnumudu	4f5c99bced	banner section layout	2023-11-04 10:08:09 +01:00
ameye	77d97548e4	Merge branch 'images-resizing' of WrenchBoard/WrenchBoardMainSite into master	2023-11-03 17:53:12 +00:00
ameye	18f651f215	Merge branch 'lnd-bug' of WrenchBoard/WrenchBoardMainSite into master	2023-11-03 17:53:07 +00:00
Chief Bube	53e429468c	added explicit sizes for the mentioned images	2023-11-03 09:56:00 -07:00