Job list

.env

@@ -5,8 +5,8 @@ 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_SIGNUP="https://dev-users.wrenchboard.com/signup"
+REACT_APP_DASH_URL_LOGIN="https://qa-users.wrenchboard.com/login?cnt=ng"
+REACT_APP_DASH_URL_SIGNUP="https://qa-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'
 REACT_APP_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
@@ -17,3 +17,9 @@ 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'
+
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

.env.development

@@ -4,9 +4,9 @@ REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v
 REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 
 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_SIGNUP="https://dev-users.wrenchboard.com/signup"
+REACT_APP_DASH_URL='https://qa-users.wrenchboard.com'
+REACT_APP_DASH_URL_LOGIN="https://qa-users.wrenchboard.com/login?cnt=ng"
+REACT_APP_DASH_URL_SIGNUP="https://qa-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'
 REACT_APP_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
@@ -16,4 +16,10 @@ 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'
+
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

.env.production

@@ -5,8 +5,8 @@ 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_SIGNUP="https://users.wrenchboard.com/signup"
+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'
 REACT_APP_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
@@ -16,4 +16,10 @@ 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'
+
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

package.json

@@ -10,11 +10,13 @@
     "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",
     "simple-react-lightbox": "^3.6.9-0",
     "slick-carousel": "^1.8.1",
+    "socket.io-client": "^4.4.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

public/index.html

@@ -25,6 +25,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <!-- link to font awesome -->
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v6.4.2/css/all.css">
+    
     <title>WrenchBoard</title>
     <meta property="og:image" content="%PUBLIC_URL%/favicon.png" />
     <meta property="business:contact_data:street_address" content="Cumberland Pkwy">
@@ -64,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,27 @@
+import { useEffect } from 'react';
 import Routes from './Routes';
+import { Redirect, useLocation } from 'react-router-dom';
+
+import { SocketValues } from './Contexts/SocketIOContext';
 
 function App() {
-    return <Routes />;
+    let { joinRoom } = SocketValues() // function to join market room, to be able to receive market job post update
+
+    const {pathname} = useLocation()
+
+    useEffect(()=>{ // sends an event to the socket to enable user join a room to be able to receive update when jobs enters the market
+        joinRoom('full-markets-jobs')
+    },[])
+
+    return (
+        <>
+        {pathname.startsWith('/@') ? 
+        <Redirect to='/app' />
+        :
+        <Routes />
+        }
+        </>
+    );
 }
 
 export default App;

src/Contexts/SocketIOContext.js

@@ -0,0 +1,52 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+
+import io from "socket.io-client";
+
+let SocketIOContext = createContext({})
+
+export default function SocketIOContextProvider({children}) {
+
+    const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 
+
+    // //Room State
+    // const [room, setRoom] = useState("");
+
+    // // Messages States
+    // const [message, setMessage] = useState("");
+    const [socketMsgReceived, setSocketMsgReceived] = useState('');
+
+    const [updateMarket, setUpdateMarket] = useState(false)
+
+    const joinRoom = (room) => {
+        if (room !== "") {
+        socket.emit("join_room", room);
+        }
+    };
+    
+    useEffect(() => {
+        socket.on("received_refreshmarket_jobs", (data) => {
+            setSocketMsgReceived(data?.message);
+            setUpdateMarket(prev => !prev)
+        });
+    }, [socket]);
+
+    let values = {
+        socket,
+        joinRoom,
+        setSocketMsgReceived,
+        socketMsgReceived,
+        updateMarket,
+    }
+
+  return (
+    <SocketIOContext.Provider value={values}>
+        {children}
+    </SocketIOContext.Provider>
+  )
+}
+
+
+export const SocketValues = () => {
+    return useContext(SocketIOContext)
+}

src/Routes.js

@@ -5,14 +5,9 @@ import Contact from './components/Contact';
 import Error from './components/Error';
 import Loader from './components/Helper/Loader';
 import ScrollToTop from './components/Helper/ScrollToTop';
-// import HomeEight from './components/HomeEight';
-// import HomeFive from './components/HomeFive';
-// import HomeFour from './components/HomeFour';
 import HomeOne from './components/HomeOne';
 import HomeSeven from './components/HomeSeven';
 import HomeSix from './components/HomeSix';
-// import HomeThree from './components/HomeThree';
-// import Hometwo from './components/HomeTwo';
 import News from './components/News';
 import SingleNews from './components/News/SingleNews';
 import Service from './components/Service';
@@ -21,49 +16,49 @@ 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);
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    });
-    useEffect(() => {
-        setTimeout(() => {
-            setLoading(false);
-        }, 2000);
-    });
-    return (
-        <>
-            {loading && (
-                <div className={`appie-loader ${loading ? 'active' : ''}`}>
-                    <Loader />
-                </div>
-            )}
-            <div className={`appie-visible ${loading === false ? 'active' : ''}`}>
-                <Router>
-                    <ScrollToTop>
-                        <Switch>
-                            {/*<Route exact path="/" component={HomeSix} />*/}
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  });
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  });
+  return (
+    <>
+      {loading && (
+        <div className={`appie-loader ${loading ? 'active' : ''}`}>
+          <Loader />
+        </div>
+      )}
+      <div className={`appie-visible ${loading === false ? 'active' : ''}`}>
+        <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>
-            </div>
-        </>
-    );
+            <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>
+    </>
+  );
 }
 
 export default Routes;

src/Services/JobsData.js

@@ -4,18 +4,10 @@ import getConfig from './../Config/config'
 async function JobsData() {
     var site = getConfig()[0];
     var callData = [{
-        "limit": 10,
+        "limit": 15,
         "page": 1
     }];
-/*
-    var res = null;
-    const getWrenchBoardJobs = () => {
-        Axios.post("https://dashboard.wrenchboard.com/svs/user/startjoblist", callData).then((response) => {
-            res = response;
-            return response;
-        });
-    }
-*/
+
     let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT+'/startjoblist', callData);
     return await response;
 }

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;
 }
@@ -1777,7 +1782,7 @@ p {
   }
 }
 .appie-hero-content ul {
-  margin: 41px 0 0;
+  /* margin: 41px 0 0; */
   padding: 0;
   list-style-type: none;
 }
@@ -1881,25 +1886,25 @@ p {
 }
 .appie-hero-content.appie-hero-content-6 .appie-title {
   font-weight: 700;
-  font-size: 70px;
-  line-height: 80px;
+  font-size: 60px;
+  line-height: 50px;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-content.appie-hero-content-6 .appie-title {
-    font-size: 60px;
-    line-height: 70px;
+    font-size: 50px;
+    line-height: 50px;
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .appie-hero-content.appie-hero-content-6 .appie-title {
-    font-size: 50px;
-    line-height: 60px;
+    font-size: 40px;
+    line-height: 40px;
   }
 }
 @media (max-width: 767px) {
   .appie-hero-content.appie-hero-content-6 .appie-title {
-    font-size: 36px;
-    line-height: 46px;
+    font-size: 30px;
+    line-height: 25px;
   }
 }
 .appie-hero-content.appie-hero-content-6 ul li a {
@@ -5903,6 +5908,22 @@ blockquote cite {
 
 .appie-error-area {
   padding-top: 250px;
+  width: 100%;
+  min-height: 100vh;
+  background: url("../images/wrenchng-page-notfound.jpg") center/cover;
+  position: relative;
+  /* z-index: 1; */
+}
+
+.appie-error-area::before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #cdcdcd;
+  opacity: 0.8;
 }
 
 .appie-error-content span {
@@ -7563,7 +7584,11 @@ blockquote cite {
 }
 
 .ab-social a.twi {
-  background: #00aced;
+  background: #fff;
+  color: #0e1133;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .ab-social a.you {
@@ -8339,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/Contact/Forms.js

@@ -1,40 +1,92 @@
-import React from 'react';
+import React, {useState} from 'react';
 import getConfig from './../../Config/config'
 import ContactData from '../../Services/ContactData';
 
 
 function Forms() {
 
-    var site = getConfig()[0];
+    const [formDetails, setFormDetails] = useState({
+        first_name: '',
+        last_name: '',
+        email: '',
+        subject: '',
+        phone_number: '',
+        action: 1001,
+        message: '',
+        channel: 'WEB',
+        terms_conditions: false
+    })
 
+    
+    const handleChange = ({target:{name, value}}) => {
+        if(name == 'terms_conditions'){
+            setFormDetails(prev => ({...prev, [name]:!prev.terms_conditions}))
+        }else{
+            setFormDetails(prev => ({...prev, [name]:value}))
+        }
+    }
+    
+    const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
+    
+    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
     function handleSubmit(e) {
-        e.preventDefault();
-      //  console.log('You clicked submit.');
-      //  console.log(e);
-       // debugger;
-        const firstname = e.target['f-name'].value;
-        const lastname = e.target['l-name'].value;
-        const email = e.target['email'].value;
-        const phone = e.target['phone'].value;
-        const subject = e.target['subject'].value;
-        const message =  e.target['message'].value;
-        const terms =   e.target['terms-conditions'].checked;
-//alert(terms);
+        e.preventDefault()
+        const isChecked = formDetails.terms_conditions
+        setRequestStatus({loading:true, status:false, msg:''})
+        if(!validForm){
+            setRequestStatus({loading:false, status:false, msg:'Please, fill all fields'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        if(!(/^\d{7,15}$/.test(formDetails.phone_number))){
+            setRequestStatus({loading:false, status:false, msg:'Please, enter a valid phone number'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        if(!isChecked){
+            setRequestStatus({loading:false, status:false, msg:'Please, Accept Terms & Conditions'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
 
-        var callData = [{
-            "firstname": firstname,
-            "lastname": lastname,
-            "email": email,
-            "phone": phone,
-            "subject": subject,
-            "message": message,
-            "channel": 'WEB'
-        }];
+        delete formDetails.terms_conditions
 
-       const callRet = ContactData(callData);
-       console.log('You clicked submit========> '+ callRet);
-
-      }
+       ContactData(formDetails).then(res =>{
+        if(res?.data?.result != '100'){
+            setRequestStatus({loading:false, status:false, msg:'failed to send message'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        setRequestStatus({loading:false, status:true, msg:'message Sent'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+            setFormDetails({
+                first_name: '',
+                last_name: '',
+                email: '',
+                subject: '',
+                phone_number: '',
+                action: 1001,
+                message: '',
+                channel: 'WEB',
+                terms_conditions: false
+            })
+        },3000)
+       }).catch(err => {
+        setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+        },3000)
+       });
+    }
 
 
     return (
@@ -46,7 +98,7 @@ function Forms() {
                             <div className="contact--info-area">
                                 <h3>Get in touch</h3>
                                 <p>Looking for help? Fill the form and start a new discussion.</p>
-                                <div className="single-info">
+                                {/* <div className="single-info">
                                     <h5>Headquaters</h5>
                                     <p>
                                         <i className="fal fa-home"></i>
@@ -57,9 +109,8 @@ function Forms() {
                                         <i className="fal fa-home"></i>
                                           {process.env.REACT_APP_SUPPORT_US_ADDRESS}
                                     </p>
-
-                                </div>
-                                <div className="single-info">
+                                </div> */}
+                                {/* <div className="single-info">
                                     <h5>Phone</h5>
                                     <p>
                                         <i className="fal fa-phone"></i>
@@ -67,7 +118,7 @@ function Forms() {
                                         <br />
                                         {process.env.REACT_APP_SUPPORT_PHONE}
                                     </p>
-                                </div>
+                                </div> */}
                                 <div className="single-info">
                                     <h5>Support</h5>
                                     <p>
@@ -82,7 +133,7 @@ function Forms() {
                                         <i className="fab fa-facebook-f"></i>
                                     </a>
                                     <a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
-                                        <i className="fab fa-twitter"></i>
+                                        <i className="fab fa-x-twitter"></i>
                                     </a>
                                     <a className="you" href="#">
                                         <i className="fab fa-youtube"></i>
@@ -98,47 +149,64 @@ function Forms() {
                                 <h4>Let’s Connect</h4>
                                 <form onSubmit={handleSubmit} className="row">
                                     <div className="col-md-6">
-                                        <input type="text" name="f-name" placeholder="First Name"  maxLength={15} />
+                                        <input type="text" name="first_name" placeholder="First Name"  maxLength={15} onChange={handleChange} value={formDetails.first_name} />
                                     </div>
                                     <div className="col-md-6">
-                                        <input type="text" name="l-name" placeholder="Last Name"  maxLength={15} />
+                                        <input type="text" name="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
                                     </div>
                                     <div className="col-md-6">
                                         <input
                                             type="email"
                                             name="email"
                                             placeholder="Email Address" 
-                                            maxLength={35} 
+                                            maxLength={55} 
+                                            onChange={handleChange}
+                                            value={formDetails.email}
                                         />
                                     </div>
                                     <div className="col-md-6">
                                         <input
-                                            type="number"
-                                            name="phone"
+                                            type="text"
+                                            name="phone_number"
                                             placeholder="Phone Number" 
                                             maxLength={15} 
+                                            onChange={handleChange}
+                                            value={formDetails.phone_number}
                                         />
                                     </div>
                                     <div className="col-md-12">
-                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35}  />
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={150} value={formDetails.subject} onChange={handleChange}  />
                                     </div>
                                     <div className="col-md-12">
                                         <textarea
                                             name="message"
                                             placeholder="How can we help?"
+                                            onChange={handleChange}
+                                            value={formDetails.message}
+                                            maxLength={350}
                                         ></textarea>
                                     </div>
                                     <div className="col-md-6">
                                         <div className="condition-check">
-                                            <input id="terms-conditions" name="terms-conditions" type="checkbox" />
+                                            <input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
                                             <label htmlFor="terms-conditions">
                                                 I agree to the <a href="#">Terms & Conditions</a>
                                             </label>
                                         </div>
                                     </div>
                                     <div className="col-md-6 text-right">
-                                        <input type="submit" name="submit" value="Send Message" />
+                                        <input 
+                                            type="submit"  
+                                            value={ requestStatus.loading ? 'Sending...' : 'Send Message'} 
+                                            disabled={requestStatus.loading} 
+                                            className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
+                                        />
                                     </div>
+                                    {/* <div className="p-2 col-12">
+                                        {requestStatus.msg &&
+                                        }
+                                    </div> */}
+                                    <p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
                                 </form>
                             </div>
                         </div>

src/components/HomeOne/CurrentJobsHero.js

@@ -1,29 +1,18 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import blogOne from '../../assets/images/blog-1.jpg';
 import blogTwo from '../../assets/images/blog-2.jpg';
 import blogThree from '../../assets/images/blog-3.jpg';
-import JobsData from '../../Services/JobsData';
+// import JobsData from '../../Services/JobsData';
 import getConfig from './../../Config/config'
 import CountDownTimer from '../Helper/CountDownTimer';
 
-class CurrentJobsHero extends Component {
+let CurrentJobsHero = ({jobs}) => {
 
-    constructor() {
-        //  debugger;
-        super();
-        this.state = { jobsDataResults: [] };
-    }
+    var site = getConfig()[0];
 
-    async componentDidMount(){
-        //  debugger;
-        JobsData().then(res => {
-            this.setState({jobsDataResults:res.data.result_list});
-        }).catch(err => {
-            console.log('startjoblist error', err)
-        })
-    }
+    var dashUrl = process.env.REACT_APP_DASH_URL;
 
-    titleLen(title){
+    function titleLen(title){
         let maxl = 45;
         title.replace('/', ' ');
         title.replace('www.', '');
@@ -32,107 +21,98 @@ class CurrentJobsHero extends Component {
 
         return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
     }
-    //  if (jobsDataResults ()== null){
-    //       return null;
-    //   }
-    render() {
-        var site = getConfig()[0];
-        if ( this.state.jobsDataResults== undefined ){
-            return null;
-        }
-        var dashUrl = process.env.REACT_APP_DASH_URL;
 
-        if (this.state.jobsDataResults.length == 0){
-            return <></>;
-        }
-        return (
-            <>
-                <section className="appie-blog-area">
-                    <div className="container">
-                        <div className="row">
-                            <p className='pl-15'>Recent jobs.</p>
+    return (
+        <>
+        {jobs.length < 1 ?
+        null
+        :
+        <section className="appie-blog-area">
+            <div className="container">
+                <div className="row">
+                    <p className='pl-15'>Recent jobs.</p>
 
-                            {
-                                this.state.jobsDataResults.map((i, index) => {
-                                    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-                                    var postDt  = new Date(i.expire).toLocaleDateString("en-US", options);
-                                    let hourRemaining = Math.floor(Math.abs(new Date() - new Date(i.expire)) / (1000*60*60))
+                    {
+                        jobs.map((i, index) => {
+                            var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                            var postDt  = new Date(i.expire).toLocaleDateString("en-US", options);
+                            let hourRemaining = Math.floor(Math.abs(new Date() - new Date(i.expire)) / (1000*60*60))
 
-                                    if(index < 5){
-                                    return (
-                                    <div className="col-12">
-                                        <div
-                                            className="container-fluid mb-10 wow animated fadeInUp boxBorder d-flex align-items-center rounded"
-                                            data-wow-duration="3000ms"
-                                            data-wow-delay="200ms"
-                                        >
-                                            <div className="content d-flex flex-column justify-content-between" style={{height: '50px', width: '100%'}}>
-                                                <div className="titleBox">
-                                                    <h3 className="title_hero">
-                                                        <a href={dashUrl}>
-                                                            <span className='font_black_hero'>{this.titleLen(i.title)} </span>
-                                                        </a>
-                                                    </h3>
-                                                </div>
-                                                <div className='p-0 container-fluid'>
-                                                    {/*<div><hr /></div>*/}
-                                                    {/*<div className="blog-meta">*/}
-                                                    {/*    <ul>*/}
-                                                    {/*        <li className="expire">*/}
-                                                    {/*            <a href={dashUrl} className='d-block'>*/}
-                                                    {/*                <div className='font_red d-flex align-items-start'>*/}
-                                                    {/*                    <div className='pr-2'>Expires :</div>*/}
-                                                    {/*                    <CountDownTimer targetDate={postDt}/>*/}
-                                                    {/*                </div>*/}
-                                                    {/*            </a>*/}
-                                                    {/*        </li>*/}
-                                                    {/*    </ul>*/}
-                                                    {/*</div>*/}
-                                                    <div className='lmoreTxt d-flex justify-content-between align-items-center'>
-                                                        <p className='text-danger' style={{fontSize: '12px'}}>{hourRemaining > 24 ? `available in the next ${hourRemaining%24} ${hourRemaining%24 > 1 ? 'days':'day'}` : `available in the next 12hrs 30mins`}</p>
-                                                        <a href={dashUrl} className=''>
-                                                            Learn More <i className="fal fa-arrow-right" />
-                                                        </a>
-                                                    </div>
-                                                </div>
+                            if(index < 5){
+                            return (
+                            <div className="col-12">
+                                <div
+                                    className="container-fluid mb-10 wow animated fadeInUp boxBorder d-flex align-items-center rounded"
+                                    data-wow-duration="3000ms"
+                                    data-wow-delay="200ms"
+                                >
+                                    <div className="content d-flex flex-column justify-content-between" style={{height: '50px', width: '100%'}}>
+                                        <div className="titleBox">
+                                            <h3 className="title_hero">
+                                                <a href={dashUrl}>
+                                                    <span className='font_black_hero'>{titleLen(i.title)} </span>
+                                                </a>
+                                            </h3>
+                                        </div>
+                                        <div className='p-0 container-fluid'>
+                                            {/*<div><hr /></div>*/}
+                                            {/*<div className="blog-meta">*/}
+                                            {/*    <ul>*/}
+                                            {/*        <li className="expire">*/}
+                                            {/*            <a href={dashUrl} className='d-block'>*/}
+                                            {/*                <div className='font_red d-flex align-items-start'>*/}
+                                            {/*                    <div className='pr-2'>Expires :</div>*/}
+                                            {/*                    <CountDownTimer targetDate={postDt}/>*/}
+                                            {/*                </div>*/}
+                                            {/*            </a>*/}
+                                            {/*        </li>*/}
+                                            {/*    </ul>*/}
+                                            {/*</div>*/}
+                                            <div className='lmoreTxt d-flex justify-content-between align-items-center'>
+                                                <p className='text-danger' style={{fontSize: '12px'}}>{hourRemaining > 24 ? `available in the next ${hourRemaining%24} ${hourRemaining%24 > 1 ? 'days':'day'}` : `available in the next 12hrs 30mins`}</p>
+                                                <a href={process.env.REACT_APP_DASH_URL_LOGIN} className=''>
+                                                    Learn More <i className="fal fa-arrow-right" />
+                                                </a>
                                             </div>
                                         </div>
                                     </div>
-                                    )
-                                    }
-
-
-                                })
+                                </div>
+                            </div>
+                            )
                             }
 
 
-                            <div className="col-md-6 col-xl-12">
-                                <div
-                                    className="appie-blog-item mt-15 wow animated fadeInUp"
-                                    data-wow-duration="3000ms"
-                                    data-wow-delay="600ms"
-                                >
+                        })
+                    }
 
-                                    <div className="pt-10 d-flex flex-column gap-2">
 
-                                        <h3 className="title">
-                                            <a href={dashUrl}>
-                                                Find more opportunities at our marketplace.
-                                            </a>
-                                        </h3>
-                                        <a className='align-self-end' href="https://users.wrenchboard.com/login">
-                                            Login now <i className="fal fa-arrow-right" />
-                                        </a>
-                                    </div>
-                                </div>
+                    <div className="col-md-6 col-xl-12">
+                        <div
+                            className="appie-blog-item mt-15 wow animated fadeInUp"
+                            data-wow-duration="3000ms"
+                            data-wow-delay="600ms"
+                        >
+
+                            <div className="pt-10 d-flex flex-column gap-2">
+
+                                <h3 className="title">
+                                    <a href={dashUrl}>
+                                        Find more opportunities at our marketplace.
+                                    </a>
+                                </h3>
+                                <a className='align-self-end' href="https://dashboard.wrenchboard.com/login">
+                                    Login now <i className="fal fa-arrow-right" />
+                                </a>
                             </div>
-
                         </div>
                     </div>
-                </section>
-            </>
-        );
-    }
+
+                </div>
+            </div>
+        </section>
+        }
+        </>
+    );
 }
 
 export default CurrentJobsHero;

src/components/HomeOne/FeaturedScreen.js

@@ -0,0 +1,94 @@
+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:1
+            },
+            600:{
+                items:2
+            },
+            800:{
+                items:3
+            },
+            1200:{
+                items:4
+            },
+            1400:{
+                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" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}

src/components/HomeOne/FooterHomeOne.js

@@ -4,136 +4,156 @@ import logo from '../../assets/images/wrenchboard.png';
 import getConfig from './../../Config/config'
 
 function FooterHomeOne({ className }) {
-    var site = getConfig()[0];
-    let newDate = new Date().getFullYear()
+  var site = getConfig()[0];
+  let newDate = new Date().getFullYear()
 
-    return (
-        <>
-            <section className={`appie-footer-area ${className || ''}`}>
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-4 col-md-6">
-                            <div className="footer-about-widget">
-                                <div className="logo">
-                                    <a href="#">
-                                        <img src={logo} alt="WrenchBoard" />
-                                    </a>
-                                </div>
-                                <p>
-                                    {`It is simple. You can do something that somebody is ready to pay you for. WrenchBoard is the platform to connect you with earning opportunities. `}
-                                </p>
-                                <a href="/service">
-                                    Read More <i className="fal fa-arrow-right" />
-                                </a>
-                                <div className="social mt-30">
-                                    <ul>
-                                        <li>
-                                            <a href={site.facebook_link}>
-                                                <i className="fab fa-facebook-f" />
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href={process.env.REACT_APP_TWITTER_LINK}>
-                                                <i className="fab fa-twitter" />
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-2 col-md-6">
-                            <div className="footer-navigation">
-                                <h4 className="title">Company</h4>
-                                <ul>
-                                    <li>
-                                        <Link to="/about-us">About Us</Link>
-                                    </li>
-                                    <li>
-                                        <Link to="/service">Our Services</Link>
-                                    </li>
-                                    <li>
-                                        <a href="/use-cases">Use Cases</a>
-                                    </li>
-                                    <li>
-                                        <Link to="/blog">Blog</Link>
-                                    </li>
-                                   
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-lg-3 col-md-6">
-                            <div className="footer-navigation">
-                                <h4 className="title">Support</h4>
-                                <ul>
-                                    <li>
-                                        <Link to="/contact">Contact</Link>
-                                    </li>
-                                    <li>
-                                        <a href="/faq">Faqs</a>
-                                    </li>
-                                    <li>
-                                        <a href="https://blog.wrenchboard.com/resources/">Resources</a>
-                                    </li>
-                                    <li>
-                                        <a href="/privacy">Privacy Policy</a>
-                                    </li>
-                                    <li>
-                                        <a href="/terms">Terms of use</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-lg-3 col-md-6">
-                            <div className="footer-widget-info">
-                                <h4 className="title">Get In Touch</h4>
-                                <ul>
-                                    <li>
-                                        <a href="#">
-                                            <i className="fal fa-envelope" /> {site.support_email}
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#">
-                                            <i className="fal fa-phone" />  404 855-7966
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#">
-                                            <i className="fal fa-map-marker-alt" />Atlanta,GA 30339 
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="footer-copyright d-flex align-items-center justify-content-between pt-2">
-                                <div className="apps-download-btn">
-                                    <ul>
-                                        <li>
-                                            <a href={process.env.APPLE_APP}>
-                                                <i className="fab fa-apple" /> Download for iOS
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
-                                                <i className="fab fa-google-play" /> Download for
-                                                Android
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <div className="copyright-text">
-                                    <p>Copyright © {newDate} WrenchBoard. All rights reserved.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+  return (
+    <>
+      <section className={`appie-footer-area ${className || ''}`}>
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-4 col-md-6">
+              <div className="footer-about-widget">
+                <div className="logo">
+                  <a href="#">
+                    <img src={logo} alt="WrenchBoard" />
+                  </a>
                 </div>
-            </section>
-        </>
-    );
+                <p>
+                  {`It is simple. You can do something that somebody is ready to pay you for. WrenchBoard is the platform to connect you with earning opportunities. `}
+                </p>
+                <a href="/service">
+                  Read More <i className="fal fa-arrow-right" />
+                </a>
+                {/* <div className="social mt-30">
+                  <ul>
+                    <li>
+                      <a href={site.facebook_link}>
+                        <i className="fab fa-facebook-f" />
+                      </a>
+                    </li>
+                    <li>
+                      <a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
+                        <i className="fab fa-x-twitter"></i>
+                      </a>
+                    </li>
+                  </ul>
+                </div> */}
+              </div>
+            </div>
+            <div className="col-lg-2 col-md-6">
+              <div className="footer-navigation">
+                <h4 className="title">Company</h4>
+                <ul>
+                  <li>
+                    <Link to="/about-us">About Us</Link>
+                  </li>
+                  <li>
+                    <Link to="/service">Our Services</Link>
+                  </li>
+                  <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>
+
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-3 col-md-6">
+              <div className="footer-navigation">
+                <h4 className="title">Support</h4>
+                <ul>
+                  <li>
+                    <Link to="/contact">Contact</Link>
+                  </li>
+                  <li>
+                    <a href="/faq">Faqs</a>
+                  </li>
+                  <li>
+                    <a href="https://blog.wrenchboard.com/resources/">Resources</a>
+                  </li>
+                  <li>
+                    <a href="/privacy">Privacy Policy</a>
+                  </li>
+                  <li>
+                    <a href="/terms">Terms of use</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-3 col-md-6">
+              <div className="footer-widget-info">
+                <h4 className="title">Get In Touch</h4>
+                <ul>
+                  <li>
+                    <a href="#">
+                      <i className="fal fa-envelope" /> {site.support_email}
+                    </a>
+                  </li>
+                  {/* <li>
+                    <a href="#">
+                      <i className="fal fa-phone" />  404-855-7966
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <i className="fal fa-map-marker-alt" />Atlanta, GA 30339
+                    </a>
+                  </li> */}
+                </ul>
+              </div>
+              <div className='footer-about-widget'>
+                <div className="social mt-30">
+                  <ul>
+                    <li>
+                      <a href={site.facebook_link}>
+                        <i className="fab fa-facebook-f" />
+                      </a>
+                    </li>
+                    <li>
+                      <a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
+                        <i className="fab fa-x-twitter"></i>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+                
+          <div className="row">
+            <div className="col-lg-12">
+              <div className="footer-copyright d-flex align-items-center justify-content-between pt-2">
+                <div className="apps-download-btn">
+                  <ul>
+                    <li>
+                      <a href={process.env.APPLE_APP}>
+                        <i className="fab fa-apple" /> Download for iOS
+                      </a>
+                    </li>
+                    <li>
+                      <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
+                        <i className="fab fa-google-play" /> Download for
+                        Android
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div className="copyright-text">
+                  <p>Copyright © {newDate} WrenchBoard. All rights reserved.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
 }
 
 export default FooterHomeOne;

src/components/HomeOne/HomeNigeria.js

@@ -2,52 +2,44 @@ import React from 'react';
 import heroThumb from '../../assets/images/hero-thumb-7.png';
 import CurrentJobsHero from "./CurrentJobsHero";
 
-function HomeNigeria() {
+function HomeNigeria({jobs}) {
     return (
         <>
-            <section className="appie-hero-area">
+            <section className="appie-hero-area pb-0 mt-50">
                 <div className="container">
                     <div className="row align-items-start">
 
-                        <div className="col-12 col-lg-6">
+                        <div className="col-12">
                             <div className="appie-hero-content appie-hero-content-6">
-                                {/*<span>Welcome To Creative App.</span>*/}
                                 <h1 className="appie-title">Pick any task and start earning.</h1>
-                                <p>
-                                    The Marketplace platform to earn money with your skills, find, buy and sell professional services.
-                                </p>
-                                <ul>
-                                    <li className=''>
-                                        <a className="item-2"  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" 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>
+                                <div className='row'>
+                                    <p className='col-12 col-lg-8'>
+                                        The Marketplace platform to earn money with your skills, find, buy and sell professional services.
+                                    </p>
+                                    <ul className='col-12 col-lg-4 d-flex justify-content-center justify-content-lg-end'>
+                                        <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>
+                                </div>
                             </div>
                         </div>
-                        <div className="col-12 col-lg-6">
-                            {/*<div className="appie-hero-thumb-6">*/}
-                            {/*    <div*/}
-                            {/*        className="thumb wow animated fadeInUp"*/}
-                            {/*        data-wow-duration="1000ms"*/}
-                            {/*        data-wow-delay="600ms"*/}
-                            {/*    >*/}
-                            {/*        <img src={heroThumb} alt="" />*/}
-                            {/*    </div>*/}
-                            {/*</div>*/}
-                            <CurrentJobsHero />
-                        </div>
+                        {/* <div className="col-12 col-lg-6">
+                            <CurrentJobsHero jobs={jobs} />
+                        </div> */}
                     </div>
                 </div>
             </section>

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

@@ -1,140 +1,121 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect, useState } from 'react';
 import blogOne from '../../assets/images/blog-1.jpg';
 import blogTwo from '../../assets/images/blog-2.jpg';
 import blogThree from '../../assets/images/blog-3.jpg';
-import JobsData from '../../Services/JobsData';
+// import JobsData from '../../Services/JobsData';
 import getConfig from './../../Config/config'
 import CountDownTimer from '../Helper/CountDownTimer';
 
-class RecentJobsOne extends Component {
+let RecentJobsOne = ({jobs}) => {
 
-    constructor() {
-      //  debugger;
-        super();
-        this.state = { jobsDataResults: [] };
+
+    var site = getConfig()[0];
+
+    var dashUrl = process.env.REACT_APP_DASH_URL;
+
+    function titleLen(title){
+        let maxl = 45;
+        title.replace('/', ' ');
+        title.replace('www.', '');
+        title.replace('.com', '');
+        title.replace('http//', '');
+
+        return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
     }
 
-async componentDidMount(){
-  //  debugger;
-    JobsData().then(res => {
-        this.setState({jobsDataResults:res.data.result_list});
-    }).catch(err => {
-        console.log('startjoblist error', err)
-    })
-}
-
-titleLen(title){
-    let maxl = 45;
-    title.replace('/', ' ');
-    title.replace('www.', '');
-    title.replace('.com', '');
-    title.replace('http//', '');
-    
-    return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
-}
-    //  if (jobsDataResults ()== null){
-    //       return null;
-    //   }
-    render() {
-        var site = getConfig()[0];
-       if ( this.state.jobsDataResults== undefined ){
-           return null;
-       }
-        var dashUrl = process.env.REACT_APP_DASH_URL;
-
-        if (this.state.jobsDataResults.length == 0){
-            return <></>;
-        }
-
-        return (
-            <>
-                <section className="appie-blog-area pt-90 pb-95">
-                    <div className="container">
-                        <div className="row">
-                            <div className="col-lg-12">
-                                <div className="appie-section-title text-center">
-                                    <h3 className="appie-title">Current Projects</h3>
-                                </div>
-                            </div>
+    return (
+        <>
+        {jobs.length < 1 ?
+        null
+        :
+        <section className="appie-blog-area pt-50 pb-50">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-12">
+                        <div className="appie-section-title text-left">
+                            <h3 className="appie-title">Current Projects</h3>
                         </div>
-                        <div className="row">
+                    </div>
+                </div>
+                <div className="row">
 
-                            {
-                                this.state.jobsDataResults.map(i => {
-                                    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-                                    var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
-
-                                    return (<div className="col-md-6 col-xl-3">
-                                        <div
-                                            className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
-                                            data-wow-duration="3000ms"
-                                            data-wow-delay="200ms"
-                                        >
-                                            <div className="content d-flex flex-column justify-content-between" style={{height: '200px', width: '100%'}}>
-                                                <div className="titleBox">
-                                                    <h3 className="title">
-                                                        <a href={dashUrl}>
-                                                        <span className='font_black'>{this.titleLen(i.title)} </span>   
-                                                        </a>
-                                                    </h3>
-                                                </div>
-                                                <div className='p-0 container-fluid'>
-                                                    <div><hr /></div>
-                                                    <div className="blog-meta">
-                                                        <ul>
-                                                            <li className="expire">
-                                                                <a href={dashUrl} className='d-block'>
-                                                                    <div className='font_red d-flex align-items-start'> 
-                                                                        <div className='pr-2'>Expires :</div>
-                                                                        <CountDownTimer targetDate={postDt}/>
-                                                                    </div>
-                                                                </a>
-                                                            </li>
-                                                        </ul>
-                                                    </div>
-                                                    <div className='lmoreTxt d-flex justify-content-end align-items-center'>
-                                                        <a href={dashUrl}>
-                                                        Learn More <i className="fal fa-arrow-right" />
-                                                    </a>                                                
-                                                    </div>
+                    {
+                        jobs.map((i, index) => {
+                            var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                            var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
+                            if(index < 24){
+                                return (
+                                <div className="col-md-6 col-xl-3">
+                                    <div
+                                        className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
+                                        data-wow-duration="3000ms"
+                                        data-wow-delay="200ms"
+                                    >
+                                        <div className="content d-flex flex-column justify-content-between" style={{height: '180px', width: '100%'}}>
+                                            <div className="titleBox">
+                                                <h3 className="title">
+                                                    <a href={dashUrl}>
+                                                    <span className='font_black'>{titleLen(i.title)} </span>   
+                                                    </a>
+                                                </h3>
+                                            </div>
+                                            <div className='p-0 container-fluid'>
+                                                <div><hr /></div>
+                                                {/*<div className="blog-meta">*/}
+                                                {/*    <ul>*/}
+                                                {/*        <li className="expire">*/}
+                                                {/*            <a href={dashUrl} className='d-block'>*/}
+                                                {/*                <div className='font_red d-flex align-items-start'> */}
+                                                {/*                    <div className='pr-2'>Expires :</div>*/}
+                                                {/*                    <CountDownTimer targetDate={postDt}/>*/}
+                                                {/*                </div>*/}
+                                                {/*            </a>*/}
+                                                {/*        </li>*/}
+                                                {/*    </ul>*/}
+                                                {/*</div>*/}
+                                                <div className='lmoreTxt d-flex justify-content-end align-items-center'>
+                                                    <a href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                                    Learn More <i className="fal fa-arrow-right" />
+                                                </a>                                                
                                                 </div>
                                             </div>
                                         </div>
-
-                                    </div>)
-
-
-                                })
-                            }
-
-
-                            <div className="col-lg-3 col-md-6">
-                                <div
-                                    className="appie-blog-item mt-30 wow animated fadeInUp"
-                                    data-wow-duration="3000ms"
-                                    data-wow-delay="600ms"
-                                >
-
-                                    <div className="content">
-
-                                        <h3 className="title">
-                                            <a href={dashUrl}>
-                                                Find more opportunities at our marketplace.
-                                            </a>
-                                        </h3>
-                                        <a href="https://dashboard.wrenchboard.com/login">
-                                            Login now <i className="fal fa-arrow-right" />
-                                        </a>
                                     </div>
                                 </div>
-                            </div>
+                                )
+                            }
 
+                        })
+                    }
+
+
+                    <div className="col-lg-3 col-md-6">
+                        <div
+                            className="appie-blog-item mt-30 wow animated fadeInUp"
+                            data-wow-duration="3000ms"
+                            data-wow-delay="600ms"
+                        >
+
+                            <div className="content">
+
+                                <h3 className="title">
+                                    <a href={dashUrl}>
+                                        Find more opportunities at our marketplace.
+                                    </a>
+                                </h3>
+                                <a href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                    Login now <i className="fal fa-arrow-right" />
+                                </a>
+                            </div>
                         </div>
                     </div>
-                </section>
-            </>
-        );
-    }
+
+                </div>
+            </div>
+        </section>
+        }
+        </>
+    );
 }
 
 export default RecentJobsOne;

src/components/HomeOne/ServicesHomeOne.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import IconOne from '../../assets/images/icon/usericon.png';
-import IconTwo from '../../assets/images/icon/Findtaskicon.png';
-import IconThree from '../../assets/images/icon/taskicon.png';
-import IconFour from '../../assets/images/icon/walleticon.png';
+import IconOne from '../../assets/images/icon/account_login.png';
+import IconTwo from '../../assets/images/icon/task.png';
+import IconThree from '../../assets/images/icon/target.png';
+import IconFour from '../../assets/images/icon/reward.png';
 
 // import FirstSlide from '../../assets/images/icon/Untitledxyz.png';
 
 
 function ServicesHomeOne({ className }) {
     return (
-        <section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
+        <section className={`appie-service-area pt-90 pb-90 ${className}`} id="service">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-8">

src/components/HomeOne/TrafficHomeTwo.js

@@ -5,7 +5,7 @@ import getConfig from './../../Config/config'
 function TrafficHomeOne() {
     var site = getConfig()[0];
     return (
-        <section className="appie-traffic-area pt-140 pb-180">
+        <section className="appie-traffic-area pt-140 pb-180 bg-white">
             <div className="container">
                 <div className="row">
                     <div className="col-lg-7">

src/components/HomeOne/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import useToggle from '../../Hooks/useToggle';
 import BackToTop from '../BackToTop';
 import Drawer from '../Mobile/Drawer';
@@ -18,24 +18,40 @@ import TrafficHomeTwo from './TrafficHomeTwo';
 import WrenchBoardHome from './WrenchBoardHome';
 import RecentJobsOne from './RecentJobsOne';
 import HomeNigeria from "./HomeNigeria";
+import FeaturedScreen from './FeaturedScreen';
+import { SocketValues } from '../../Contexts/SocketIOContext';
+import JobsData from '../../Services/JobsData';
 //import BlogData from './../../Services/BlogData';
 
 function HomeOne() {
+
+    let {updateMarket} = SocketValues() // destructure FROM SOCKET
+
     const [drawer, drawerAction] = useToggle(false);
 
+    let [jobs, setJobs] = useState([])
+
+    useEffect(()=>{
+        JobsData().then(res => {
+            setJobs(res.data.result_list);
+        }).catch(err => {
+            console.log('startjoblist error', err)
+        })
+    },[updateMarket])
 
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
             <HomeOneHeader action={drawerAction.toggle} />
-            <HomeNigeria />
+            <HomeNigeria jobs={jobs} />
             {/*<HeroHomeOne />*/}
+            <RecentJobsOne jobs={jobs} />
             <ServicesHomeOne />
-            <RecentJobsOne />
             <FeaturesHomeOne />
             {/*<FaqHomeOne />*/}
             {/*<TrafficHomeOne />*/}
             <TrafficHomeTwo />
+            <FeaturedScreen />
             {/*<TestimonialHomeOne />*/}
             {/*<TeamHomeOne />*/}
             {/*<PricingHomeOne />*/}

src/components/Navigation.js

@@ -11,7 +11,7 @@ function Navigation() {
                 <li>
                     <Link to="/service">Services</Link>
                 </li>
-                <li>
+                {/* <li>
                     <a href="#">
                         Resources <i className="fal fa-angle-down" />
                     </a>
@@ -26,7 +26,7 @@ function Navigation() {
                             <Link to="/faq">FAQs</Link>
                         </li>
                     </ul>
-                </li>
+                </li> */}
                
             </ul>
         </>

src/components/News/index.js

@@ -24,7 +24,7 @@ function News() {
             <section className="blogpage-section">
                 <div className="container">
                     <div className="row">
-                        <div className="col-lg-12 col-md-7">
+                        <div className="col-12">
                             <Blogs />
                         </div>
                       

src/components/Service/MissionStatement.js

@@ -29,7 +29,7 @@ function MissionStatement() {
         },
         {
             id: 4,
-            title: "Get you work done",
+            title: "Get your work done",
             content: "For other tasks you need to get done, we will be there for smooth engagement",
         }
     ];

src/components/Service/index.js

@@ -25,7 +25,7 @@ function Service() {
             <HeroNews
                 title="Services"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/service', title: 'Service' },
                 ]}
             />

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,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import SocketIOContextProvider from './Contexts/SocketIOContext';
+
 import App from './App';
 import './assets/css/bootstrap.min.css';
 import './assets/css/custom-animated.css';
@@ -12,7 +15,11 @@ import './assets/css/style.css';
 
 ReactDOM.render(
     <React.StrictMode>
-        <App />
+        <Router>
+            <SocketIOContextProvider>
+                <App />
+            </SocketIOContextProvider>
+        </Router>
     </React.StrictMode>,
     document.getElementById('root')
 );

src/lib/localImgLoad.js

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