dev link for wrench agent changed

.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=ng"
 REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=ng"
 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=ng"
 REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=ng"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -16,4 +16,7 @@ REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
 REACT_APP_SUPPORT_PHONE='404 855-7966'
 REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
 REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
-REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com'

.env.production

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

package.json

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

public/index.html

@@ -68,4 +68,7 @@
     var s = document.getElementsByTagName('script')[0]; 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>

src/App.js

@@ -1,7 +1,18 @@
 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;

src/Routes.js

@@ -16,6 +16,7 @@ import UseCases from './components/UseCases';
 import Privacy from './components/Service/Privacy';
 import Terms from './components/Service/Terms';
 import FAQ from './components/FAQ/Index';
+import AppDownload from './components/AppDownload/AppDownload';
 
 function Routes() {
   const [loading, setLoading] = useState(true);
@@ -35,27 +36,26 @@ function Routes() {
         </div>
       )}
       <div className={`appie-visible ${loading === false ? 'active' : ''}`}>
-        <Router>
-          <ScrollToTop>
-            <Switch>
-              {/*<Route exact path="/" component={HomeSix} />*/}
+        <ScrollToTop>
+          <Switch>
+            {/*<Route exact path="/" component={HomeSix} />*/}
 
-              <Route exact path="/" component={HomeOne} />
-              <Route exact path="/news" component={News} />
-              <Route exact path="/blog" component={News} />
-              <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 component={Error} />
-            </Switch>
-          </ScrollToTop>
-        </Router>
+            <Route exact path="/" component={HomeOne} />
+            <Route exact path="/news" component={News} />
+            <Route exact path="/blog" component={News} />
+            <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="/app" component={AppDownload} />
+            <Route component={Error} />
+          </Switch>
+        </ScrollToTop>
       </div>
     </>
   );

src/assets/css/main.css

@@ -899,6 +899,11 @@ p {
   padding-bottom: 20px;
 }
 
+.appie-title .earn-rewards {
+  background-color: #f54747!important;
+  border-radius: 7px;
+}
+
 .header-nav-box .appie-btn-box {
   position: relative;
 }
@@ -8359,4 +8364,33 @@ blockquote cite {
   animation-timing-function: linear;
   animation-duration: .5s;
   animation-fill-mode: forwards; */
+}
+
+
+
+/* -----------Interface_Section-Css-Start----------------- */
+
+/* interface wraper */
+.interface_section .screen_slider {
+  margin-top: 35px;
+  /* min-height: 520px; */
+  display: flex;
+  align-items: center;
+}
+
+/* interface images */
+.interface_section .owl-item .screen_frame_img img {
+  transform: scale(.9);
+  border: 2px solid #000;
+  border-radius: 20px;
+  transition: 1s all;
+  margin: 0 auto;
+  height: 520px;
+  width: auto;
+}
+
+.interface_section .owl-item.center .screen_frame_img img {
+  transform: scale(1);
+  border: 3px solid #000;
+  padding: 5px;
 }

src/assets/css/style.css

@@ -117,6 +117,27 @@ font-size: 15px;
   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;

src/components/AppDownload/AppDownload.js

@@ -0,0 +1,11 @@
+import HomeOneHeader from '../HomeOne/HomeOneHeader';
+import AppDownloadDetails from './AppDownloadDetails';
+
+export default function AppDownload() {
+  return (
+    <>
+      <HomeOneHeader showLogoOnly={true} />
+      <AppDownloadDetails />
+    </>
+  )
+}

src/components/AppDownload/AppDownloadDetails.js

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

src/components/HomeOne/FeaturedScreen.js

@@ -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>
+    </>
+  )
+}

src/components/HomeOne/FooterHomeOne.js

@@ -54,6 +54,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>
@@ -94,12 +97,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>

src/components/HomeOne/HomeOneHeader.js

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

src/components/HomeOne/index.js

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

src/components/customSlider/CustomSlider.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+
+function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
+  let [sliderCount, setSliderCount] = useState(0);
+
+  const sliderStart = (count) => {
+    if (count + 1 && typeof count == "number") {
+      return setSliderCount(count);
+    }
+    if (sliderCount >= images.length - 1) {
+      return setSliderCount(0);
+    }
+    setSliderCount((prev) => prev + 1);
+  };
+
+  useEffect(() => {
+    const sliderInterval = setInterval(() => {
+      sliderStart();
+    }, speed * 1000);
+    return () => {
+      clearInterval(sliderInterval);
+    };
+  }, [sliderCount]);
+
+  return (
+    <div
+      className=""
+      style={{
+        width: "100%",
+        margin: "auto",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <div className="" style={{ width: "100%", display: "flex" }}>
+        {images.map((image, index) => (
+          <img
+            key={index}
+            src={image}
+            alt="image"
+            style={{
+              width: "100%",
+              minWidth: "100%",
+              maxHeight: "695px",
+              height: "100%",
+              position: "relative",
+              transition: ".9s",
+              right: `${
+                sliderCount == index ? sliderCount * 100 + "%" : "-100%"
+              }`,
+              opacity: `${sliderCount == index ? "1" : "0"}`,
+            }}
+            // style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, opacity:`${sliderCount == index ? '1':'0'}`}}
+          />
+        ))}
+      </div>
+      <div
+        className="custom_indicators"
+        style={{
+          margin: "10px auto",
+          display: "flex",
+          gap: "10px",
+          justifyContent: "center",
+        }}
+      >
+        {images.map((image, index) => (
+          <div
+            key={index}
+            onClick={() => sliderStart(index)}
+            className={`custom_indicator ${indicatorClass}`}
+            style={{
+              backgroundColor: `${
+                sliderCount == index ? `${indicatorColor}` : ""
+              }`,
+              width: "15px",
+              height: "15px",
+              borderRadius: "999px",
+              border: `1px solid ${indicatorColor}`,
+              cursor: "pointer",
+            }}
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CustomSlider;

src/index.js

@@ -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')
 );

src/lib/localImgLoad.js

@@ -0,0 +1,2 @@
+const localImgLoad = (location) => require(`../assets/${location}`);
+export default localImgLoad