added dev link for wrench agent site

.env

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

.env.development

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

.env.production

@@ -5,7 +5,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 REACT_APP_SITE_NAME='WrenchBoard'
 REACT_APP_DASH_URL='https://users.wrenchboard.com'
-REACT_APP_DASH_URL_LOGIN="https://users.wrenchboard.com/login"
+REACT_APP_DASH_URL_LOGIN="https://users.wrenchboard.com/login?cnt=us"
 REACT_APP_DASH_URL_SIGNUP="https://users.wrenchboard.com/signup?cnt=us"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -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'

src/assets/css/aboutapp.css

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

src/assets/css/main.css

@@ -1,4 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
+@import url("aboutapp.css");
+
 body {
   font-family: "Roboto", sans-serif;
   font-weight: normal;

src/assets/css/style.css

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

src/components/HomeOne/FeaturedScreen.js

@@ -4,6 +4,7 @@ import localImgLoad from '../../lib/localImgLoad'
 
 import 'owl.carousel/dist/assets/owl.carousel.css'
 import 'owl.carousel/dist/assets/owl.theme.default.css'
+import LazyImage from '../../lib/LazyImage'
 
 export default function FeaturedScreen() {
   

src/components/HomeOne/FooterHomeOne.js

@@ -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>

src/components/HomeOne/HeroHomeOne.js

@@ -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'
                     />

src/components/UseCases/index.js

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

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

@@ -1,101 +1,58 @@
 import { Link } from 'react-router-dom'
 import React from 'react'
-import frame from '../../../../assets/images/about-frame.png'
+//import 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>
     </>
   )
 }