added dev link for wrench agent site

Merge branch 'agent-link' of WrenchBoard/WrenchBoardMainSite into master
agent link added to env
2024-02-17 14:50:20 +01:00 · 2024-02-16 17:55:36 +00:00 · 2024-02-16 17:34:02 +01:00 · 2024-02-16 13:45:39 +00:00 · 2024-02-16 14:16:39 +01:00 · 2024-02-16 11:26:20 +00:00
57 changed files with 858 additions and 168 deletions
@@ -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'
@@ -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'
@@ -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'
@@ -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://agents.wrenchboard.com'
@@ -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>
+<!--  <script>-->
-    (function (i, s, o, g, r, a, m) {
+<!--    (function (i, s, o, g, r, a, m) {-->
-      i["GoogleAnalyticsObject"] = r;
+<!--      i["GoogleAnalyticsObject"] = r;-->
-      (i[r] =
+<!--      (i[r] =-->
-        i[r] ||
+<!--        i[r] ||-->
-        function () {
+<!--        function () {-->
-          (i[r].q = i[r].q || []).push(arguments);
+<!--          (i[r].q = i[r].q || []).push(arguments);-->
-        }),
+<!--        }),-->
-        (i[r].l = 1 * new Date());
+<!--        (i[r].l = 1 * new Date());-->
-      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+<!--      (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);-->
-      a.async = 1;
+<!--      a.async = 1;-->
-      a.src = g;
+<!--      a.src = g;-->
-      m.parentNode.insertBefore(a, m);
+<!--      m.parentNode.insertBefore(a, m);-->
-    })(
+<!--    })(-->
-      window,
+<!--      window,-->
-      document,
+<!--      document,-->
-      "script",
+<!--      "script",-->
-      "https://www.google-analytics.com/analytics.js",
+<!--      "https://www.google-analytics.com/analytics.js",-->
-      "ga"
+<!--      "ga"-->
-    );
+<!--    );-->
-    ga("create", "UA-54829827-4", "auto");
+<!--    ga("create", "UA-54829827-4", "auto");-->
-    ga("send", "pageview");
+<!--    ga("send", "pageview");-->
-  </script>
+<!--  </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": ".",
@@ -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;
@@ -8538,3 +8597,31 @@ LND PAGE STYLE STARTS HERE
    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;
 }
@@ -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;
 }
@@ -0,0 +1,82 @@
 import React from 'react'
 import OwlCarousel from 'react-owl-carousel'
 import localImgLoad from '../../lib/localImgLoad'
 import 'owl.carousel/dist/assets/owl.carousel.css'
 import 'owl.carousel/dist/assets/owl.theme.default.css'
 import LazyImage from '../../lib/LazyImage'
 export default function FeaturedScreen() {
    const screen_slider = {
        loop:true,
        margin:10,
        nav:false,
        autoplay: true,
        smartSpeed: 1500,
        center: true,
        dots: true, 
        responsive:{
            0:{
                items: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>
    </>
  )
 }
@@ -55,6 +55,9 @@ function FooterHomeOne({ className }) {
                                    <li>
                                        <a href="/use-cases">Use Cases</a>
                                    </li>
                                    <li>
                                        <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
                                    </li>
                                    <li>
                                        <Link to="/blog">Blog</Link>
                                    </li>
@@ -8,23 +8,31 @@ 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 SliderTwo from '../../assets/images/home/app-slide-home-1.png'
 import SliderThree from '../../assets/images/home/app-slide-home-2.png'
 function HeroHomeOne() {
  var site = getConfig()[0];
  const sliders = [
    SliderOne, SliderTwo, SliderThree
  ]
  return (
    <>
      <section className="appie-hero-area">
        <div className="container">
-          <div className="row align-items-center">
+          <div className="row">
            <div className="col-lg-6">
-              <div className="appie-hero-content appie-hero-content-6">
+              <div className="appie-hero-content appie-hero-content-6 d-flex flex-column h-100">
                {/*<span>Welcome To WrenchBoard..</span>*/}
                <h1 className="appie-title">
                  Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
                </h1>
                <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.</p>
-                <ul>
+                <ul className='d-flex justify-content-center justify-content-lg-start'>
                  <li className=''>
                      <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
                          <i className="fab fa-apple"></i>
@@ -54,7 +62,8 @@ function HeroHomeOne() {
                  {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
                  <div style={{ width: '350px', margin: 'auto' }}>
                    <CustomSlider
-                      images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
+                      // images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
                      images={sliders}
                      speed='5'
                      indicatorColor='#333'
                    />
@@ -3,6 +3,7 @@ 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 (
@@ -25,10 +26,10 @@ function ServicesHomeOne({ className }) {
  return (
    <section
-      className={`appie-service-area pt-20 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">
@@ -50,7 +51,9 @@ function ServicesHomeOne({ className }) {
            </div>
          ))}
        </div>
-      </div>
+      </div> */}
      <Main />
    </section>
  );
 }
@@ -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 />*/}
@@ -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">
@@ -1,101 +1,58 @@
 import { Link } from 'react-router-dom'
 import React from 'react'
-import frame from '../../../../assets/images/about-frame.png'
+//import frame from '../../../../assets/images/about-frame.png'
-import screen from '../../../../assets/images/about-screen.png'
+import frame from '../../../../assets/images/use-case-side-main.png'; //about-frame.png'
 import screen from '../../../../assets/images/use-case-side-extra.png'; //about-screen.png'
 import img1 from '../../../../assets/images/download.png'
 import img2 from '../../../../assets/images/followers.png'
 import img3 from '../../../../assets/images/reviews.png'
 import img4 from '../../../../assets/images/countries.png'
-const Main = ({video , dark}) => {
+const Main = ({ video, dark }) => {
  return (
    <>
-        <section className="row_am about_app_section">
+      <section className="row_am about_app_section _">
-            <div className="container">
+        <div className="container">
-                <div className="row">
+          <div className="row modern_ui_section">
-                    <div className="col-lg-6">
+            <div className="col-lg-6">
-                        <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
-                        <div className="frame_img">
+                <div className="frame_img">
-                            <img className="moving_position_animatin" src={frame} alt="image"/>
+                  <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>
                </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="ui_text w-100">
-                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                            <div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
-                            <h2>Beautiful design with <span>modern UI</span></h2>
+                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
-                            <p>
+                                <p className=''>
-                            Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
+                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
-                            industrys standard dummy text ever since the when an unknown printer took a galley of type and.
+                                </p>
-                            </p>
+                            </div>
-                        </div>
+                            <div className="row">
-                        <ul className="design_block">
+                            {list?.map(({ icon, header, paragraph, name }, idx) => (
-                            <li data-aos="fade-up" data-aos-duration="1500">
+                                <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
-                            <h4>Carefully designed</h4>
+                                    <div
-                            <p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
+                                        className={`appie-traffic-service features appie-modern-design`}
-                            </li>
+                                        style={{ paddingRight: "45px" }}
-                            <li data-aos="fade-up" data-aos-duration="1500">
+                                    >
-                            <h4>Seamless Sync</h4>
+                                        <div className="icon">
-                            <p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
+                                        <i className={icon} />
-                            </li>
+                                        </div>
-                            <li data-aos="fade-up" data-aos-duration="1500">
+                                        <h5 className="title">{header}</h5>
-                            <h4>Access Drive</h4>
+                                        <p>{paragraph}</p>
-                            <p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
+                                    </div>
-                                setting.</p>
+                                </div>
-                            </li>
+                            ))}
-                        </ul>
+                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
-                        <div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
+                        <div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
-                        <div className="left_img">
+                            <div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
-                            <img className="moving_position_animatin" src={img1} alt="image" />
+                                <div className="left_img position-relative">
-                        </div>
+                                    <img 
-                        <div className="right_img">
+                                        className="moving_position_animatin position-relative" 
-                            <img className="moving_position_animatin" src={img2} alt="image" />
+                                        src={ localImgLoad(`images/home/${activeImg}.jpg`)} 
-                            <img className="moving_position_animatin" src={img3} alt="image" />
+                                        alt="image" 
-                            <img className="moving_position_animatin" src={img4} alt="image" />
+                                        width='332px'
-                        </div>
+                                        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>
@@ -59,3 +100,32 @@ const Main = ({gredient}) => {
 }
 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',
      },
    ]
Author	SHA1	Message	Date
victorAnumudu	de29ec70a5	added dev link for wrench agent site	2024-02-17 14:50:20 +01:00
ameye	024db8e2d5	Merge branch 'agent-link' of WrenchBoard/WrenchBoardMainSite into master	2024-02-16 17:55:36 +00:00
victorAnumudu	ec1cbd9364	agent link added to env	2024-02-16 17:34:02 +01:00
ameye	13173ddb46	Merge branch 'slider-upgrade' of WrenchBoard/WrenchBoardMainSite into master	2024-02-16 13:45:39 +00:00
victorAnumudu	9780468013	added more images	2024-02-16 14:16:39 +01:00
ameye	5cd0f8106c	Merge branch 'slider-upgrade' of WrenchBoard/WrenchBoardMainSite into master	2024-02-16 11:26:20 +00:00
victorAnumudu	7633ecfafa	changed slider images	2024-02-16 12:21:49 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	04fc8d530f	image works	2024-02-10 14:05:03 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	7fd72924b4	card back	2024-02-10 12:08:40 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a37c0bd2ed	image size	2024-02-10 05:59:59 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	800da885a5	image size	2024-02-10 05:49:32 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	4b75e02b99	improve image	2024-02-09 22:18:04 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a9626fd8f2	wallet	2024-02-09 20:04:51 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	88e2ccf237	add kids	2024-02-09 19:18:40 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a86b00abe8	image size	2024-02-08 04:49:33 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e066cc62fc	assign task	2024-02-07 20:16:43 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	4d8cd1e7f4	send reward	2024-02-07 15:38:53 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	29723863de	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/WrenchBoardMainSite	2024-02-06 11:11:52 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	935ff983fc	family no kids	2024-02-06 11:11:43 -05:00
ameye	57171133b1	Merge branch 'home-slider-update' of WrenchBoard/WrenchBoardMainSite into master	2024-02-05 18:01:53 +00:00
victorAnumudu	12b2dde302	changed home image sliders	2024-02-05 18:57:58 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	7f999dfc8a	exta image	2024-02-04 14:21:39 -05:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	9f5ca78913	use case page	2024-02-04 13:55:27 -05:00
ameye	492008630f	Merge branch 'hero-adjustment' of WrenchBoard/WrenchBoardMainSite into master	2024-02-02 19:50:24 +00:00
ameye	ab566937b7	Merge branch 'country-query' of WrenchBoard/WrenchBoardMainSite into master	2024-02-02 19:50:17 +00:00
victorAnumudu	5e974e0637	adjusted here section	2024-02-02 19:43:41 +01:00
victorAnumudu	31ee4e01ac	added country query params to login link	2024-02-02 17:34:23 +01:00
ameye	f79831f0da	Merge branch 'added-about-app-component' of WrenchBoard/WrenchBoardMainSite into master	2024-02-01 20:05:23 +00:00
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