added socket context

.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://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'
 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

@@ -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://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'
 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.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,28 @@
+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')
+        console.log('market room joined')
+    },[])
+
+    return (
+        <>
+        {pathname.startsWith('/@') ? 
+        <Redirect to='/app' />
+        :
+        <Routes />
+        }
+        </>
+    );
 }
 
 export default App;

src/Contexts/SocketIOContext.js

@@ -0,0 +1,49 @@
+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({type:'', msg:''});
+
+    const joinRoom = (room) => {
+        if (room !== "") {
+        socket.emit("join_room", room);
+        }
+    };
+    
+    useEffect(() => {
+        socket.on("received_refreshmarket_jobs", (data) => {
+            setSocketMsgReceived({type: 'market', msg: data?.message});
+            console.log('YES ssss')
+        });
+    }, [socket]);
+
+    let values = {
+        socket,
+        joinRoom,
+        setSocketMsgReceived,
+        socketMsgReceived,
+    }
+
+  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/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;
 }
@@ -2684,10 +2689,14 @@ p {
 }
 .service-details-content .content .title {
   font-size: 30px;
-  margin-bottom: 18px;
+  /* margin-bottom: 18px; */
   letter-spacing: 2px;
   text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
+.service-details-content .content h6.title {
+  font-size: 20px;
+  letter-spacing: 1px;
+}
 .service-details-content .content p {
   font-size: 18px;
   line-height: 28px;
@@ -5899,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 {
@@ -7559,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 {
@@ -8335,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

@@ -33,8 +33,8 @@ function Forms() {
 
        const callRet = ContactData(callData);
        console.log('You clicked submit========> '+ callRet);
+    }
 
-      }
 
 
     return (
@@ -82,7 +82,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>

src/components/HomeOne/CurrentJobsHero.js

@@ -1,29 +1,39 @@
-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 getConfig from './../../Config/config'
 import CountDownTimer from '../Helper/CountDownTimer';
+import { SocketValues } from '../../Contexts/SocketIOContext';
 
-class CurrentJobsHero extends Component {
+let CurrentJobsHero = () => {
 
-    constructor() {
-        //  debugger;
-        super();
-        this.state = { jobsDataResults: [] };
-    }
+  let {socketMsgReceived} = SocketValues() // destructure FROM SOCKET
 
-    async componentDidMount(){
-        //  debugger;
-        JobsData().then(res => {
-            this.setState({jobsDataResults:res.data.result_list});
-        }).catch(err => {
-            console.log('startjoblist error', err)
-        })
-    }
 
-    titleLen(title){
+    var site = getConfig()[0];
+
+    var dashUrl = process.env.REACT_APP_DASH_URL;
+
+    let [jobs, setJobs] = useState([])
+
+    // constructor() {
+    //     //  debugger;
+    //     super();
+    //     this.state = { jobsDataResults: [] };
+    // }
+
+    // async componentDidMount(){
+    //     //  debugger;
+    //     JobsData().then(res => {
+    //         this.setState({jobsDataResults:res.data.result_list});
+    //     }).catch(err => {
+    //         console.log('startjoblist error', err)
+    //     })
+    // }
+
+    function titleLen(title){
         let maxl = 45;
         title.replace('/', ' ');
         title.replace('www.', '');
@@ -32,107 +42,117 @@ 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;
+
+    useEffect(()=>{
+        if(socketMsgReceived.type == '' || socketMsgReceived.type == 'market'){
+            JobsData().then(res => {
+                setJobs(res.data.result_list);
+            }).catch(err => {
+                console.log('startjoblist error', err)
+            })
         }
-        var dashUrl = process.env.REACT_APP_DASH_URL;
+    },[socketMsgReceived.type])
 
-        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>
 
-                            {
-                                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))
 
-                                    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 ( this.state.jobsDataResults== undefined ){
+    //     return null;
+    // }
+
+    // if (this.state.jobsDataResults.length == 0){
+    //     return <></>;
+    // }
+    return (
+        <>
+        {jobs.length < 1 ?
+        null
+        :
+        <section className="appie-blog-area">
+            <div className="container">
+                <div className="row">
+                    <p className='pl-15'>Recent jobs.</p>
+
+                    {
+                        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'>{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>
                                     </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://users.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,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

@@ -4,136 +4,139 @@ 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>
+          </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

@@ -18,7 +18,7 @@ function HomeNigeria() {
                                 </p>
                                 <ul>
                                     <li className=''>
-                                        <a className="item-2"  href={process.env.REACT_APP_APPLE_APP}>
+                                        <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>
@@ -26,7 +26,7 @@ function HomeNigeria() {
                                         </a>
                                     </li>
                                     <li className=''>
-                                        <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
+                                        <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>

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

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

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/Service/DetailsTerms.js

@@ -13,80 +13,262 @@ function DetailsService() {
                         </div>
                         <div className="col-lg-8">
                             <div className="service-details-content">
-                               
                                 <div className="content">
-                                    <h4 className="title">Terms of use</h4>
-                                    <p>
-                                    These Website Terms & Conditions (“T&Cs”) apply to your access and use of www.wrenchboard.com,dashboard.wrenchboard.com (the “Site”), including all software, data, reports, text, images, sounds, video, and all contents made available through any portion of the Site (collectively, the “Content”). Content includes all such elements as a whole, as well as individual elements and portions thereof.
+                                    <div className="mb-4">
+                                    <h4 className="title mb-4">
+                                        Terms of use
+                                    </h4>
+                                    <p className="">
+                                        (updated August 10, 2023)
+                                    </p>
+                                    <p className="">
+                                        These Website Terms & Conditions (“T&Cs”) apply to your access and
+                                        use of www.wrenchboard.com,users.wrenchboard.com (the “Site”),
+                                        native apps, including all software, data, reports, text, images,
+                                        sounds, video, and all contents made available through any portion
+                                        of the Site (collectively, the “Content”). The range includes all
+                                        such elements as whole, individual, and parts.
+                                    </p>
+                                    </div>
                                     <hr />
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Acceptance of Terms
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD permits you (“User” or “you” or “your”) to access and
+                                        use the Site and Content, subject to these T&Cs. By accessing or
+                                        using any portion of the Site, you acknowledge that you have read,
+                                        understood, and agree to be bound by these T&Cs. If you do not agree
+                                        with these T&Cs, you must not accept these T&Cs or access or use the
+                                        site or content.
                                     </p>
-
-                                    <h4 className="title">Acceptance of Terms </h4>
-                                    <p>WRENCHBOARD permits you (“User” or “you” or “your”) to access and use the Site and Content, subject to these T&Cs. By accessing or using any portion of the Site, you acknowledge that you have read, understood, and agree to be bound by these T&Cs. If you do not agree with these T&Cs, you must not accept these T&Cs or access or use the site or content.
+                                    </div>
                                     <hr />
-                                    </p>
-
-                                    <h4 className="title">General Conditions of Use </h4> 
-                                    <p>
-                                        <b>Authorization to Access and Use Site and Content.</b> Subject to your compliance with these T&Cs and the provisions hereof, you may access or use the Site and Content solely for the purpose of your evaluation of WRENCHBOARD and WRENCHBOARD’s products and services. You may only link to the Site or Content, or any portion thereof, as expressly permitted by WRENCHBOARD.
-                                        <br />
-                                        <b>Ownership and Restrictions.</b> All rights, title, and interest in and to the Site and Content will remain with and belong exclusively to WRENCHBOARD. You will not (a) sublicense, resell, rent, lease, transfer, assign, time share or otherwise commercially exploit or make the Site and any Content available to any third party, (b) use the Site and Content in any unlawful manner (including without limitation in violation of any data, privacy or export control laws) or in any manner that interferes with or disrupts the integrity or performance of the Site and Content or their related components, or (c) modify, adapt or hack the Site and Content to, or try to, gain unauthorized access to the restricted portions of the Site and Content or related systems or networks (i.e., circumvent any encryption or other security measures, gain access to any source code or any other underlying form of technology or information, and gain access to any part of the Site and Content, or any other products or services of WRENCHBOARD that are not readily made available to the general public).
-                                        You are not permitted to copy, modify, frame, repost, publicly perform or display, sell, reproduce, distribute, or create derivative works of the Site and Content, except that you may download, display, and print one copy of the publicly available materials (i.e., the Content that does not require an Account name or password to access) on any single computer solely for your personal, non-commercial use, provided that you do not modify the material in any way and you keep intact all copyright, trademark, and other proprietary notices. You agree not to access the Site or Content by any means other than through the interface that is provided by WRENCHBOARD to access the same. You may not use any “page-scrape,” “deep-link,” “spider,” or “robot or other automatic program, device, algorithm or methodology, or any similar manual process, to access, copy, acquire, or monitor any portion of the Site or any Content, or in any way reproduce or circumvent the presentation or navigational structure of the Site or any Content, to obtain or attempt to obtain any Content or other information through any means not made generally available through the Site by WRENCHBOARD. WRENCHBOARD reserves the right to take any lawful measures to prevent any such activity. You may not forge headers or otherwise manipulate identifiers in order to disguise the origin of any message or transmittal you send to WRENCHBOARD on or through the Site or any service offered on or through the Site. You may not pretend that you are, or that you represent, someone else, or impersonate any other individual or entity.
-                                        <br />
-                                        <b>Responsibility for Your Data.</b> You are solely responsible for all data, information, and other content, that you upload, post, or otherwise provide or store (hereafter “post(ing)”) in connection with or relating to the Site.
-
-
-                                        <hr />
-
-
-                                    </p>
-
-                                    <h4 className="title"> Use of Intellectual Property.</h4>
-                                    <p>
-
-                                        <b>Rights in User Content.</b> By posting your information and other content (“User Content”) on or through the Site and Content, you grant WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable, royalty-free, fully paid, sublicensable and transferable license to use, modify, reproduce, distribute, display, publish and perform User Content in connection with the Site and Content. WRENCHBOARD has the right, but not the obligation, to monitor the Site and Content and User Content. WRENCHBOARD may remove or disable any User Content at any time for any reason, or for no reason at all. 
-
-                                        You, the user, acknowledge that you bear sole responsibility for adequate security, protection, and backup of User Content. WRENCHBOARD will have no liability to you for any unauthorized access or use of any of User Content, or any corruption, deletion, destruction, or loss of any of User Content.
-
 
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        General Conditions of Use
+                                    </h4>
+                                    <ul className="ml-4">
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Authorization to Access and Use Site and Content.
+                                        </h6>
+                                        <p className="">
+                                            Subject to your compliance with these T&Cs and the provisions
+                                            hereof, you may access or use the Site and Content solely to
+                                            evaluate WRENCHBOARD and WRENCHBOARD’s products and services.
+                                            You may only link to the Site or Content, or any portion
+                                            thereof, as expressly permitted by WRENCHBOARD.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Ownership and Restrictions
+                                        </h6>
+                                        <p className="">
+                                            All rights, title, and interest in and to the Site and Content
+                                            will remain exclusive to WRENCHBOARD. You will not:
+                                        </p>
+                                        <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Sublicense, resell, rent, lease, transfer, assign, timeshare,
+                                            or commercially exploit or make the Site and any Content
+                                            available to any third party.
+                                            </li>
+                                            <li className="my-2">
+                                            Use the Site and Content in any unlawful manner (including
+                                            without limitation in violation of any data, privacy, or
+                                            export control laws) or in any way that interferes with or
+                                            disrupts the integrity or performance of the Site and Content
+                                            or their related components.
+                                            </li>
+                                            <li className="my-2">
+                                            Modify, adapt, or hack the Site and Content to, or try to,
+                                            gain unauthorized access to the restricted portions of the
+                                            Site and Content or related systems or networks (i.e.,
+                                            circumvent any encryption or other security measures, gain
+                                            access to any source code or any other underlying form of
+                                            technology or information, and gain access to any part of the
+                                            Site and Content, or any other products or services of
+                                            WRENCHBOARD that are not readily made available to the general
+                                            public).
+                                            </li>
+                                        </ol>
+                                        <p className="my-4">
+                                            You are not permitted to copy, modify, frame, repost, publicly
+                                            perform or display, sell, reproduce, distribute, or create
+                                            derivative works of the Site and Content, except that you may
+                                            download and print one copy of the publicly available materials
+                                            (i.e., the Content that does not require an Account name or
+                                            password to access) on any single computer solely for your
+                                            personal, non-commercial use, provided that you do not modify
+                                            the material in any way. You keep intact all copyright,
+                                            trademark, and other proprietary notices.
+                                        </p>
+                                        <p className="my-4">
+                                            You agree not to access the Site or Content by any means other
+                                            than through the interface that WRENCHBOARD provides to access
+                                            the same. You may not use any “page-scrape,” “deep-link,”
+                                            “spider,” or “robot or other automatic program, device,
+                                            algorithm or methodology, or any similar manual process, to
+                                            access, copy, acquire, or monitor any portion of the Site or any
+                                            Content, or in any way reproduce or circumvent the presentation
+                                            or navigational structure of the Site or any Content, to obtain
+                                            or attempt to obtain any Content or other information through
+                                            any means not made generally available through the Site by
+                                            WRENCHBOARD.
+                                        </p>
+                                        <p className="my-4">
+                                            WRENCHBOARD reserves the right to take lawful measures to
+                                            prevent such activity. You may not forge headers or otherwise
+                                            manipulate identifiers to disguise the origin of any message or
+                                            transmittal you send to WRENCHBOARD on or through the Site or
+                                            any service offered on or through the Site. You may not pretend
+                                            that you are, or that you represent, someone else or impersonate
+                                            any other individual or entity.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Responsibility for Your Data
+                                        </h6>
+                                        <p className="">
+                                            You are solely responsible for all data, information, and other
+                                            Content, that you upload, post, or otherwise provide or store
+                                            (hereafter “post(ing)”) in connection with or relating to the
+                                            Site. By posting your information and other Content (“User
+                                            Content”) on or through the Site and Content, you grant
+                                            WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable,
+                                            royalty-free, sublicensable, and transferable license to use,
+                                            modify, reproduce, distribute, display, publish and perform User
+                                            Content in connection with the Site and Content. WRENCHBOARD has
+                                            the right, but not the obligation, to monitor the Site and
+                                            Content and User Content. <br />
+                                            WRENCHBOARD may remove or turn off any User Content at any time
+                                            for any reason or no reason. WRENCHBOARD will have no liability
+                                            to you for any unauthorized access or use of any of User Content
+                                            or any corruption, deletion, destruction, or loss of any of User
+                                            Content.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Feedback
+                                        </h6>
+                                        <p className="">
+                                            You may submit ideas, suggestions, or comments (“Feedback”)
+                                            regarding the Site and Content or WRENCHBOARD’s business,
+                                            products, or services. By submitting any Feedback, you
+                                            acknowledge and agree that:{" "}
+                                        </p>
+                                        <ol className="ml-5" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Your Feedback is provided by you voluntarily, and WRENCHBOARD
+                                            may, without any obligations or limitations, use and exploit
+                                            such Feedback in any manner and for any purpose.
+                                            </li>
+                                            <li className="my-2">
+                                            You will not seek and are not entitled to any money or other
+                                            form of compensation, consideration, or attribution concerning
+                                            your Feedback, regardless of whether WRENCHBOARD considered or
+                                            used your Feedback in any manner.
+                                            </li>
+                                            <li className="my-2">
+                                            Your Feedback is not confidential or proprietary information
+                                            of you or any third party.
+                                            </li>
+                                        </ol>
+                                        </li>
+                                    </ul>
+                                    </div>
                                     <hr />
-                                    </p>
 
-                                    <h4 className="title">Feedback</h4>
-                                    <p>
-                                   
-                                    You may submit ideas, suggestions, or comments (“Feedback”) regarding the Site and Content or WRENCHBOARD’s business, products, or services. By submitting any Feedback, you acknowledge and agree that (a) your Feedback is provided by you voluntarily and WRENCHBOARD may, without any obligations or limitation, use and exploit such Feedback in any manner and for any purpose, (b) you will not seek and are not entitled to any money or other form of compensation, consideration, or attribution with respect to your Feedback regardless of whether WRENCHBOARD considered or used your Feedback in any manner, and (c) your Feedback is not the confidential or proprietary information of you or any third party.
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Termination of Access Due to Violations
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD may, in its sole discretion and without prior notice,
+                                        terminate your access to the Site and block your future access to
+                                        the Site if we determine that you have violated these T&Cs or other
+                                        agreements or guidelines which may be associated with your use of
+                                        the Site. Further, WRENCHBOARD may, in its sole discretion and
+                                        without prior notice, terminate your access to the Site for cause,
+                                        which includes (but is not limited to):
+                                    </p>
+                                    <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                        <li className="my-2">
+                                        Requests by law enforcement or other government agencies
+                                        </li>
+                                        <li className="my-2">
+                                        Discontinuance or material modification of the Site or any service
+                                        offered on or through the Site
+                                        </li>
+                                        <li className="my-2">
+                                        Unexpected technical issues or problems.T&Cs Updates
+                                        </li>
+                                    </ol>
+                                    <p className="">
+                                        WRENCHBOARD reserves the right, at its sole discretion, to change or
+                                        modify portions of these T&Cs at any time. WRENCHBOARD will post the
+                                        changes to these T&Cs on the Site and indicate at the top of this
+                                        page the date these terms were last revised. It is your
+                                        responsibility to check the T&Cs periodically for changes. Your
+                                        continued use of the Site and Content after the date any such
+                                        changes become effective constitutes your acceptance of the new or
+                                        revised T&Cs.
+                                    </p>
+                                    </div>
                                     <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD
+                                    </h4>
+                                    <p className="">
+                                        THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE
+                                        PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND
+                                        DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD
+                                        EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING
+                                        ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY,
+                                        FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY
+                                        REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE
+                                        OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD
+                                        DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND
+                                        CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE, OR
+                                        VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE
+                                        RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SITE AND CONTENT.
+                                        NO INFORMATION, ADVICE, OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD
+                                        OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN
+                                        THESE TERMS and CONDITIONS, AND YOU SHOULD NOT RELY ON THE SITE AND
+                                        THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.
                                     </p>
-
-
-                                    <p>
-                                   <h4 className="title"> Termination of Access Due to Violations.</h4>
-                                   WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site and/or block your future access to the Site if we determine that you have violated these T&Cs or other agreements or guidelines which may be associated with your use of the Site. You also agree that any violation by you of these T&Cs will cause irreparable harm to WRENCHBOARD, for which monetary damages would be inadequate, and you consent to WRENCHBOARD obtaining any injunctive or equitable relief that WRENCHBOARD deems necessary or appropriate in such circumstances, without limiting WRENCHBOARD’s other available remedies. Further, WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site, for cause, which includes (but is not limited to) (1) requests by law enforcement or other government agencies, (2) discontinuance or material modification of the Site or any service offered on or through the Site, or (3) unexpected technical issues or problems.
-                                        <hr />
-                                    </p>
-
-
-                                    <h4 className="title"> T&Cs Updates</h4>
-                                    <p>
-                                    WRENCHBOARD reserves the right, at its sole discretion, to change or modify portions of these T&Cs at any time. WRENCHBOARD will post the changes to these T&Cs on the Site and will indicate at the top of this page the date these terms were last revised. It is your responsibility to check the T&Cs periodically for changes. Your continued use of the Site and Content after the date any such changes become effective constitutes your acceptance of the new or revised T&Cs.
+                                    </div>
                                     <hr />
+
+                                    <div className="my-4">
+                                    <p className="">
+                                        WRENCHBOARD reserves the right to do any of the following, at any
+                                        time, without notice: ( 1 ); to modify, suspend or terminate operation
+                                        of or access to the Site, or any portion of the Site, for any
+                                        reason; ( 2 ) to modify or change the Site, or any portion of the
+                                        Site, for any reason; and ( 3 ) to interrupt the operation of the
+                                        Site, or any portion of the Site, as necessary to perform routine or
+                                        non-routine maintenance, error correction, or other changes. Changes
+                                        to the Policy
                                     </p>
 
-
-                                    <h4 className="title">NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD</h4> 
-                                    <p>
-                                        THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE OR VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE RESULTS THAT MAY BE OBTAINED FROM USE OF THE SITE AND CONTENT. NO INFORMATION, ADVICE OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN THESE TERMS and CONDITIONS AND YOU SHOULD NOT RELY ON THE SITE AND THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.                                   
-                                        <hr/>
-                                        WRENCHBOARD reserves the right to do any of the following, at any time, without notice: (1) to modify, suspend or terminate operation of or access to the Site, or any portion of the Site, for any reason; (2) to modify or change the Site, or any portion of the Site, for any reason; and (3) to interrupt the operation of the Site, or any portion of the Site, as necessary to perform routine or non-routine maintenance, error correction, or other changes.
-                                        <hr />
-                                    </p>
-
-                                    <h4 className="title">Changes To the Policy</h4>
-                                    <p>
-                                    We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
-                                    Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
+                                    <p className="my-4">
+                                        We reserve the right to update and change this Privacy policy at any
+                                        time. Changes will become effective once posted. However, we will
+                                        notify you by email or when you log on to the service or website
+                                        about any changes that fundamentally affect how we manage your
+                                        personal information. Contacting Us: You may contact us about this
+                                        policy through our email address anytime: support@wrenchboard.com
                                     </p>
+                                    </div>
                                 </div>
                             </div>
                         </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