service banner replaced with breadcrumb

.env

@@ -1 +1,19 @@
-ESLINT_NO_DEV_ERRORS=true
+ESLINT_NO_DEV_ERRORS=true
+
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+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_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'
+REACT_APP_TWITTER_LINK='https://twitter.com/wrenchboard/'
+REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+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'

.env.development

@@ -0,0 +1,19 @@
+ESLINT_NO_DEV_ERRORS=true
+
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+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_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'
+REACT_APP_TWITTER_LINK='https://twitter.com/wrenchboard/'
+REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+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'

.env.production

@@ -0,0 +1,19 @@
+ESLINT_NO_DEV_ERRORS=true
+
+REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+
+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_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'
+REACT_APP_TWITTER_LINK='https://twitter.com/wrenchboard/'
+REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+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'

src/Config/config.js

@@ -19,7 +19,7 @@ function getConfig() {
             "support_us_address": 'Cumberland Pkwy, Atlanta GA 30339',
             "support_ng_address": 'Saka Tinubu Street, Victoria Island Lagos, Nigeria',
             "dummy": "2018-06-25T18:54:22.000Z",
-            "user_service_endpoint": "https://dashboard.wrenchboard.com/svs/user",
+            "user_service_endpoint": process.env.REACT_APP_AUX_ENDPOINT,
         }
     ];
 

src/Routes.js

@@ -20,6 +20,7 @@ import UseCases from './components/UseCases';
 
 import Privacy from './components/Service/Privacy';
 import Terms from './components/Service/Terms';
+import FAQ from './components/FAQ/Index';
 
 function Routes() {
     const [loading, setLoading] = useState(true);
@@ -52,7 +53,7 @@ function Routes() {
                             <Route exact path="/privacy" component={Privacy} />
                             <Route exact path="/about-us" component={AboutUs} />
                             <Route exact path="/contact" component={Contact} />
-                            <Route exact path="/faq" component={HomeOne} />
+                            <Route exact path="/faq" component={FAQ} />
                             <Route exact path="/error" component={Error} />
                             <Route component={Error} />
                         </Switch>

src/Services/ContactData.js

@@ -4,7 +4,7 @@ import getConfig from './../Config/config'
 async function ContactData(callData) {
     // debugger;
     var site = getConfig()[0];
-    let response = await Axios.post(site.user_service_endpoint + "/sitecontact", callData);
+    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, callData);
     return response.data.result;
 }
 

src/Services/FaqData.js

@@ -0,0 +1,11 @@
+import Axios from 'axios';
+import getConfig from './../Config/config'
+
+async function FaqData() {
+    // debugger;
+    var site = getConfig()[0];
+    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/faq`);
+    return await response;
+}
+
+export default FaqData;

src/Services/JobsData.js

@@ -16,8 +16,8 @@ async function JobsData() {
         });
     }
 */
-    let response = await Axios.post(site.user_service_endpoint + "/startjoblist", callData);
-    return response.data.result_list;
+    let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT+'/startjoblist', callData);
+    return await response;
 }
 
 export default JobsData;

src/assets/css/main.css

@@ -175,6 +175,8 @@ p {
   font-size: 44px;
   line-height: 54px;
   color: #08538d;
+  letter-spacing: 4.6px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-section-title .appie-title {
@@ -1430,6 +1432,8 @@ p {
   line-height: 80px;
   padding: 0 80px;
   color: #08538d;
+  letter-spacing: 4.6px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-area.appie-hero-3-area .appie-hero-content .appie-title {
@@ -1735,6 +1739,8 @@ p {
   line-height: 70px;
   margin-top: 10px;
   margin-bottom: 22px;
+  letter-spacing: 4.6px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-content .appie-title {
@@ -2313,7 +2319,7 @@ p {
     4.APPIE SERVOCE css 
 ===========================*/
 .appie-service-area {
-  background: #eef1f6;
+  background: #fbf4fe;
   position: relative;
   background-position: 92% 100%;
   background-repeat: no-repeat;
@@ -2468,7 +2474,7 @@ p {
 .appie-single-service-2 {
   border: 1px solid #eef0f4;
   border-radius: 10px;
-  padding: 48px;
+  padding: 40px;
   -webkit-transition: all 0.3s ease-out 0s;
   -moz-transition: all 0.3s ease-out 0s;
   -ms-transition: all 0.3s ease-out 0s;
@@ -2490,6 +2496,10 @@ p {
   color: #fff;
   border-radius: 50%;
 }
+.appie-single-service-2 .icon img {
+  height: 100px;
+  width: 100px;
+}
 .appie-single-service-2 .title {
   font-size: 20px;
   font-weight: 700;
@@ -2543,19 +2553,19 @@ p {
 }
 .appie-single-service-2.appie-single-service-about {
   border-radius: 0;
-  padding: 0 90px 30px 0;
+  /* padding: 0 30px 30px 0; */
   border: 0;
   transition: all linear 0.3s;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-single-service-2.appie-single-service-about {
-    padding-right: 30px;
+    /* padding-right: 30px; */
   }
 }
 @media (max-width: 767px) {
   .appie-single-service-2.appie-single-service-about {
-    padding-right: 50px;
-    padding-left: 50px;
+    /* padding-right: 50px;
+    padding-left: 50px; */
   }
 }
 .appie-single-service-2.appie-single-service-about .icon i {
@@ -2634,10 +2644,13 @@ p {
   margin-bottom: 20px;
 }
 .service-details-sidebar .service-category-widget ul li i {
-  color: #2b70fa;
+  color: #4687ba;
   width: 15px;
   margin-right: 15px;
 }
+.service-details-sidebar .service-category-widget ul li a {
+  color: #4687ba;
+}
 .service-details-sidebar .service-category-widget ul li:last-child {
   margin-bottom: 0;
 }
@@ -2651,10 +2664,10 @@ p {
   color: #505056;
 }
 .service-details-sidebar .service-download-widget a:hover {
-  color: #2b70fa;
+  color: #4687ba;
 }
 .service-details-sidebar .service-download-widget i {
-  color: #2b70fa;
+  color: #4687ba;
   padding-right: 15px;
 }
 
@@ -2676,6 +2689,9 @@ p {
   padding-top: 34px;
   padding-bottom: 26px;
 }
+.service-details-content .content p a {
+  color: #4687ba;
+}
 
 .appie-services-8-area .service-thumb {
   margin-left: -50px;
@@ -2992,6 +3008,7 @@ p {
   position: relative;
   overflow: hidden;
   z-index: 15;
+  background-color: #fbf4fe;
 }
 .appie-traffic-area .traffic-thumb {
   position: absolute;
@@ -5600,7 +5617,7 @@ blockquote cite {
   ul
   li
   a:hover {
-  color: #db0f30;
+  color: #4687ba;
 }
 .appie-footer-area.appie-footer-about-area.appie-footer-8-area
   .footer-widget-info
@@ -5731,7 +5748,7 @@ blockquote cite {
   margin-bottom: 6px;
 }
 .footer-navigation ul li a:hover {
-  color: #2b70fa;
+  color: #4687ba;
 }
 .footer-navigation.footer-navigation-2 ul li a:hover {
   color: #ff3e66;
@@ -8219,3 +8236,71 @@ blockquote cite {
 }
 
 /*# sourceMappingURL=style.css.map */
+
+/* CSS FOR FAQ ACCORDION DISPLAY */
+.accordion-con{
+  background-color: #f5f6f7;
+}
+
+.accordion-item{
+  position: relative;
+  overflow: hidden;
+  /* z-index: 1; */
+  border-radius: 5px;
+  box-shadow: 0px 0px 15px #ddd;
+  padding: 10px;
+  background-color: #fff;
+}
+.accordion-title-bar{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.accordion-title p {
+  font-weight: 600;
+}
+
+.accordion-title-icon{
+  position: absolute;
+  right: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.accordion-title-icon img{
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+}
+.horizontal{
+  transition: all .5s;
+  display: flex;
+  align-items: center;
+  background-color: skyblue;
+  color: #fff;
+  border-radius: 999px;
+  padding: 2px 3px;
+}
+.vertical{
+  transform: rotate(180deg);
+  background-color: #4687ba;
+}
+
+.accordion-body-hide{
+  position: relative;
+  height: 0;
+  visibility: hidden;
+  transition: all .5s;
+}
+.accordion-body-show{
+  position: relative;
+  /* height: 100px; */
+  visibility: visible;
+  transition: all .5s;
+  /* animation-name: slidedown;
+  animation-timing-function: linear;
+  animation-duration: .5s;
+  animation-fill-mode: forwards; */
+}

src/components/AboutUs/HeaderAbout.js

@@ -30,10 +30,10 @@ function HeaderAbout({ action }) {
                             </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={site.dash_url_login}>
+                                    <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                         <i className="fal fa-user"></i> Login
                                     </a>
-                                    <a className="main-btn ml-30" href={site.dash_url_signup}>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/AboutUs/ServicesAbout.js

@@ -31,13 +31,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="200ms"
                             >
-                                <div className="icon d-flex justify-content-between align-items-end">
-                                    <div className='container'>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
                                         <i className="fal fa-tv"></i>
-                                    </div>
-                                    <div className='container'>
-                                        <img src={Design} />
-                                    </div>
+                                    </div> */}
+                                    <img src={Design} />
                                 </div>
                                 <h4 className="title">Carefully designed</h4>
                                 <p>We listen to how the users will love to use our tools. It is always about the users</p>
@@ -49,16 +47,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="400ms"
                             >
-                                {/* <div className="icon">
-                                    <i className="fal fa-code"></i>
-                                </div> */}
-                                <div className="icon d-flex justify-content-between align-items-end">
-                                    <div className='container'>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
                                         <i className="fal fa-code"></i>
-                                    </div>
-                                    <div className='container'>
-                                        <img src={Approach} />
-                                    </div>
+                                    </div> */}
+                                    <img src={Approach} />
                                 </div>
                                 <h4 className="title">Modern Approach</h4>
                                 <p>Our target is to present a cutting-edge solution that serves the users at all times.</p>
@@ -70,16 +63,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="600ms"
                             >
-                                {/* <div className="icon">
-                                    <i className="fal fa-user-friends"></i>
-                                </div> */}
-                                <div className="icon d-flex justify-content-between align-items-end">
-                                    <div className='container'>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
                                         <i className="fal fa-user-friends"></i>
-                                    </div>
-                                    <div className='container'>
-                                        <img src={Interactive} />
-                                    </div>
+                                    </div> */}
+                                    <img src={Interactive} />
                                 </div>
                                 <h4 className="title">User Interactive</h4>
                                 <p>Email, notifications, and alerts to get you engaged in the process.</p>
@@ -91,16 +79,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="200ms"
                             >
-                                {/* <div className="icon">
-                                    <i className="fal fa-mobile"></i>
-                                </div> */}
-                                <div className="icon d-flex justify-content-between align-items-end">
-                                    <div className='container'>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
                                         <i className="fal fa-mobile"></i>
-                                    </div>
-                                    <div className='container'>
-                                        <img src={Mobility} />
-                                    </div>
+                                    </div> */}
+                                    <img src={Mobility} />
                                 </div>
                                 <h4 className="title">Mobility Approach</h4>
                                 <p>Web and native app solution for your continuously moving life.</p>
@@ -112,16 +95,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="400ms"
                             >
-                                {/* <div className="icon">
-                                    <i className="fal fa-retweet"></i>
-                                </div> */}
-                                <div className="icon d-flex justify-content-between align-items-end">
-                                    <div className='container'>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
                                         <i className="fal fa-retweet"></i>
-                                    </div>
-                                    <div className='container'>
-                                        <img src={Seamless} />
-                                    </div>
+                                    </div> */}
+                                    <img src={Seamless} />
                                 </div>
                                 <h4 className="title">Seamless Sync</h4>
                                 <p> Changes across platforms is simplified and streamlined.</p>
@@ -133,16 +111,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="600ms"
                             >
-                                {/* <div className="icon">
-                                    <i className="fal fa-bell"></i>
-                                </div> */}
-                                <div className="icon d-flex justify-content-between align-items-end">
-                                    <div className='container'>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <div className='container'>
                                         <i className="fal fa-bell"></i>
-                                    </div>
-                                    <div className='container'>
-                                        <img src={Privacy} />
-                                    </div>
+                                    </div> */}
+                                    <img src={Privacy} />
                                 </div>
                                 <h4 className="title">Privacy</h4>
                                 <p>We truly respect your need for privacy. Our solution doesn't need to share your data to work for you.</p>

src/components/Contact/Forms.js

@@ -50,12 +50,12 @@ function Forms() {
                                     <h5>Headquaters</h5>
                                     <p>
                                         <i className="fal fa-home"></i>
-                                        {site.support_us_address}
+                                        {process.env.REACT_APP_SUPPORT_US_ADDRESS}
                                     </p>
 
                                     <p>
                                         <i className="fal fa-home"></i>
-                                        {site.support_ng_address}
+                                        {process.env.REACT_APP_SUPPORT_NG_ADDRESS}
                                     </p>
 
                                 </div>
@@ -63,31 +63,31 @@ function Forms() {
                                     <h5>Phone</h5>
                                     <p>
                                         <i className="fal fa-phone"></i>
-                                        {site.support_phone}
+                                        {process.env.REACT_APP_SUPPORT_PHONE}
                                         <br />
-                                       {site.support_phone_ng}
+                                       {process.env.REACT_APP_SUPPORT_PHONE_NG}
                                     </p>
                                 </div>
                                 <div className="single-info">
                                     <h5>Support</h5>
                                     <p>
                                         <i className="fal fa-envelope"></i>
-                                        {site.support_email}
+                                        {process.env.REACT_APP_SUPPORT_EMAIL}
                                        
                                     </p>
                                 </div>
                                 <div className="ab-social">
                                     <h5>Follow Us</h5>
-                                    <a className="fac" href={site.facebook_link}>
+                                    <a className="fac" href={process.env.REACT_APP_FACEBOOK_LINK}>
                                         <i className="fab fa-facebook-f"></i>
                                     </a>
-                                    <a className="twi" href={site.twitter_link}>
+                                    <a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
                                         <i className="fab fa-twitter"></i>
                                     </a>
                                     <a className="you" href="#">
                                         <i className="fab fa-youtube"></i>
                                     </a>
-                                    <a className="lin" href={site.linked_link}>
+                                    <a className="lin" href={process.env.REACT_APP_LINKEDIN_LINK}>
                                         <i className="fab fa-linkedin-in"></i>
                                     </a>
                                 </div>

src/components/FAQ/Index.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import useToggle from '../../Hooks/useToggle';
+import Drawer from '../Mobile/Drawer';
+import FooterHomeOne from '../HomeOne/FooterHomeOne';
+import BackToTop from '../BackToTop';
+import StickyMenu from '../../lib/StickyMenu';
+import FAQService from '../Service/FAQServices';
+import HeroNews from '../News/HeroNews';
+import HeaderNews from '../News/HeaderNews';
+
+
+function FAQ() {
+    useEffect(() => {
+        StickyMenu();
+    });
+    const [drawer, drawerAction] = useToggle(false);
+    return (
+        <>
+            <Drawer drawer={drawer} action={drawerAction.toggle} />
+            <HeaderNews action={drawerAction.toggle} />
+            <HeroNews
+                title="Frequently asked questions"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/faq', title: 'Faq' },
+                ]}
+            />
+            <FAQService />
+            <FooterHomeOne />
+            <BackToTop />
+        </>
+    );
+}
+
+export default FAQ;

src/components/Helper/CountDownTimer.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+
+const CountDownTimer = ({ targetDate, aboutToExpire=false }) => {
+  const calculateTimeLeft = () => {
+    const difference = +new Date(targetDate) - +new Date();
+    let timeLeft = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60)
+      };
+    }
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  },[]);
+
+  const formatTime = (value) => {
+    return value.toString().padStart(2, '0');
+  };
+
+  const { days, hours, minutes, seconds } = timeLeft;
+  
+  const newHours = hours+days*24
+
+  if (!days && !hours && !minutes && !seconds) {
+    return <span>{targetDate}</span>;
+  }
+
+  return (
+    <div>
+        <div>{formatTime(newHours)} : {formatTime(minutes)} : {formatTime(seconds)}</div>
+        <div>Hrs Min Sec</div>
+        {/* <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(days)}</span>
+            <span>day(s)</span>
+        </span> */}
+        {/* <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(newHours)}</span>
+            <span>hr(s)</span>
+        </span>
+        <span className='p-3'>:</span>
+        <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(minutes)}</span>
+            <span>min(s)</span>
+        </span>
+        <span className='p-3'>:</span>
+        <span className='d-flex flex-column count-timer'>
+            <span>{formatTime(seconds)}</span>
+            <span>sec(s)</span>
+        </span> */}
+    </div>
+  );
+};
+
+export default CountDownTimer;
+
+{/* <span>{days && <span>{formatTime(days)} days </span>}</span> */}
+{/* <span>{hours && <span>{formatTime(hours)} hours </span>}</span> */}
+{/* <span>{minutes && <span>{formatTime(minutes)} minutes </span>}</span> */}
+{/* <span>{seconds && <span>{formatTime(seconds)} seconds </span>}</span> */}

src/components/HomeOne/FeaturesHomeOne.js

@@ -68,7 +68,7 @@ function FeaturesHomeOne({ className }) {
         //                     <p>
         //                     WrenchBoard platform connects you with quality service that need articles writing, blog management, photography, product testing research and surveys and more to deliver your project with ease.
         //                     </p>
-        //                     <a className="main-btn" href={site.dash_url_login}>
+        //                     <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
         //                         Learn More
         //                     </a>
         //                 </div>
@@ -89,7 +89,7 @@ function FeaturesHomeOne({ className }) {
         //                     <p>
         //                         Cash in the Pocket with WrenchBoard as a reliable partner to connect you with new opportunities.Track, Organize your Portfolio and Manage your Skills, preferred workgroup and teams efficiently.
         //                     </p>
-        //                     <a className="main-btn" href={site.dash_url_login}>
+        //                     <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
         //                         Learn More
         //                     </a>
         //                 </div>
@@ -110,7 +110,7 @@ function FeaturesHomeOne({ className }) {
         //                     <p>
         //                         Get paid Instantly for completed task using WrenchBoard. Achieve your short-term goals or long-term income by Connecting with WrenchBoard. Complete access to your earnings.
         //                     </p>
-        //                     <a className="main-btn" href={site.dash_url_login}>
+        //                     <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
         //                         Learn More
         //                     </a>
         //                 </div>

src/components/HomeOne/FooterHomeOne.js

@@ -33,7 +33,7 @@ function FooterHomeOne({ className }) {
                                             </a>
                                         </li>
                                         <li>
-                                            <a href={site.twitter_link}>
+                                            <a href={process.env.REACT_APP_TWITTER_LINK}>
                                                 <i className="fab fa-twitter" />
                                             </a>
                                         </li>
@@ -112,12 +112,12 @@ function FooterHomeOne({ className }) {
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>
-                                            <a href={site.apple_app}>
+                                            <a href={process.env.APPLE_APP}>
                                                 <i className="fab fa-apple" /> Download for iOS
                                             </a>
                                         </li>
                                         <li>
-                                            <a className="item-2" href={site.android_app}>
+                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
                                                 <i className="fab fa-google-play" /> Download for
                                                 Android
                                             </a>

src/components/HomeOne/HeroHomeOne.js

@@ -20,22 +20,22 @@ function HeroHomeOne() {
                                 <h1 className="appie-title">
                                     Earn Money with Any Skill.
                                 </h1>
+                                <p>
+                                    The Marketplace platform to earn money with your skills, find, buy and sell professional services. Connect, build an outstanding portfolio and link to an integrated community with best services via a digital platform.
+                                </p>
                                 <ul>
                                     <li>
-                                        <a href={site.apple_app}>
+                                        <a href={process.env.APPLE_APP}>
                                             <i className="fab fa-apple" /> Download for iOS
                                         </a>
                                     </li>
                                     <li>
-                                        <a className="item-2" href={site.android_app}>
+                                        <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
                                             <i className="fab fa-google-play" /> Download for
                                             Android
                                         </a>
                                     </li>
                                 </ul>
-                                <p className='mt-3'>
-                                    The marketplace to make money from your skills, find, buy and sell professional services. Connect with freelancers to get work done faster.
-                                </p>
                             </div>
                         </div>
                         <div className="col-lg-6">

src/components/HomeOne/HomeOneHeader.js

@@ -28,10 +28,10 @@ function HomeOneHeader({ action }) {
                         </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={site.dash_url_login}>
+                                <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={site.dash_url_signup}>
+                                <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                     Get Started
                                 </a>
                                 <div

src/components/HomeOne/RecentJobsOne.js

@@ -4,6 +4,7 @@ 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';
 
 class RecentJobsOne extends Component {
 
@@ -15,12 +16,15 @@ class RecentJobsOne extends Component {
 
 async componentDidMount(){
   //  debugger;
-     const response = await JobsData();
-     this.setState({jobsDataResults:response});
+    JobsData().then(res => {
+        this.setState({jobsDataResults:res.data.result_list});
+    }).catch(err => {
+        console.log('startjoblist error', err)
+    })
 }
 
 titleLen(title){
-    let maxl = 58;
+    let maxl = 45;
     title.replace('/', ' ');
     title.replace('www.', '');
     title.replace('.com', '');
@@ -36,7 +40,7 @@ titleLen(title){
        if ( this.state.jobsDataResults== undefined ){
            return null;
        }
-        var dashUrl = site.dash_url;
+        var dashUrl = process.env.REACT_APP_DASH_URL;
 
         if (this.state.jobsDataResults.length == 0){
             return <></>;
@@ -62,12 +66,11 @@ titleLen(title){
 
                                     return (<div className="col-lg-3 col-md-6">
                                         <div
-                                            className="appie-single-service mt-30 wow animated fadeInUp boxBorder"
+                                            className="appie-single-service mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
                                             data-wow-duration="3000ms"
                                             data-wow-delay="200ms"
                                         >
-
-                                            <div className="content">
+                                            <div className="content d-flex flex-column justify-content-between align-items-center" style={{height: '260px'}}>
                                                 <div className="titleBox">
                                                     <h3 className="title">
                                                         <a href={dashUrl}>
@@ -75,31 +78,25 @@ titleLen(title){
                                                         </a>
                                                     </h3>
                                                 </div>
-
-
-                                                <div><hr /></div>
-                                                <div className="blog-meta">
-                                                    <ul>
-                                                        <li className="expire">
-                                                            <a href={dashUrl}><span className='font_red'> Expires : {postDt} </span></a>
-                                                        </li>
-                                                    </ul>
+                                                <div className='p-0 container-fluid'>
+                                                    <div><hr /></div>
+                                                    <div className="blog-meta">
+                                                        <ul>
+                                                            <li className="expire">
+                                                                {/* <a href={dashUrl}><span className='font_red'> Expires : {postDt} </span></a> */}
+                                                                <a href={dashUrl}><span className='font_red'> Expires : <CountDownTimer targetDate={postDt}/> </span></a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div className='lmoreTxt'>
+                                                        <a href={dashUrl}>
+                                                        Learn More <i className="fal fa-arrow-right" />
+                                                    </a>                                                
+                                                    </div>
                                                 </div>
-                                                <div className='lmoreTxt'>
-                                                    <a href={dashUrl}>
-                                                    Learn More <i className="fal fa-arrow-right" />
-                                                   </a>                                                
-                                                </div>
-
                                             </div>
                                         </div>
 
-
-                   
-                        
-                  
-
-
                                     </div>)
 
 

src/components/HomeOne/TrafficHomeTwo.js

@@ -54,7 +54,7 @@ function TrafficHomeOne() {
                             </div>
                             {/* <div className="col-lg-12">
                                 <div className="traffic-btn mt-50">
-                                    <a className="main-btn" href={site.dash_url_login}>
+                                    <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                         Login <i className="fal fa-arrow-right" />
                                     </a>
                                 </div>

src/components/Mobile/Drawer.js

@@ -72,7 +72,7 @@ function Drawer({ drawer, action }) {
                                 <div className="offcanvas-social">
                                     <ul className="text-center">
                                         <li>
-                                            <a href={site.facebook_link} >
+                                            <a href={process.env.REACT_APP_FACEBOOK_LINK} >
                                                 <i className="fab fa-facebook-f"></i>
                                             </a>
                                         </li>
@@ -89,12 +89,12 @@ function Drawer({ drawer, action }) {
                                         <li>
                                             <a href="#">
                                                 <i className="fal fa-envelope"></i>{' '}
-                                               {site.support_email}
+                                               {process.env.REACT_APP_SUPPORT_EMAIL}
                                             </a>
                                         </li>
                                         <li>
                                             <a href="#">
-                                                <i className="fal fa-phone"></i> {site.support_phone}
+                                                <i className="fal fa-phone"></i> {process.env.REACT_APP_SUPPORT_PHONE}
                                             </a>
                                         </li>
                                         <li>

src/components/News/HeaderNews.js

@@ -29,10 +29,10 @@ function HeaderNews({ action }) {
                             </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={site.dash_url_login}>
+                                    <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                         <i className="fal fa-user"></i> Login
                                     </a>
-                                    <a className="main-btn ml-30" href={site.dash_url_signup}>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/Service/DetailsService.js

@@ -38,7 +38,7 @@ function DetailsService() {
                                        finance & accounting, website & app development, creative & design, 
                                        customer support and operations.
                                        <hr />
-                                       Learn more at < a href ={site.dash_url_login} >WrenchBoard</a>
+                                       Learn more at < a href ={process.env.REACT_APP_DASH_URL_LOGIN} >WrenchBoard</a>
                                     </p>
                                 </div>
                             </div>

src/components/Service/FAQServices.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import ServiceSideMenu from './ServiceSideMenu';
+import {Link} from 'react-router-dom'
+import FaqData from '../../Services/FaqData';
+import Arrow from '../../assets/images/arrow-down.png'
+
+function FAQService() {
+    const [isOpen, setOpen] = React.useState({type: 'faq0'});
+    const accordionHandler = (name) => {
+      setOpen(prev => {
+        if(prev.type == name){
+            return {type: ''}
+        }else {
+            return {type: name}
+        }
+      });
+    };
+    let [faq, setFaq] = useState([])
+
+    useEffect(()=>{
+        FaqData().then(res => {
+            setFaq(res.data.result_list)
+        }).catch(err => {
+            console.log('You got an error ========> '+ err)
+        })
+    },[])
+
+    return (
+        <>
+            <section className="appie-service-details-area pt-100 pb-100">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-4">
+                            <ServiceSideMenu />
+                        </div>
+                        <div className="col-lg-8 accordion-wrapper">
+                            <div className="p-3 service-details-content accordion-con">
+                                <div className="container-fluid">
+                                    <h3 className='p-3 text-center'>Frequently asked questions</h3>
+                                </div>
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                </div>
+                                <div className='container-fluid text-center'>
+                                    <p className='my-4'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default FAQService;
+
+export function Accordion({ datas, name, accordionHandler, isOpen }) {
+    // const [isOpen, setOpen] = React.useState(false);
+    // const accordionHandler = () => {
+    //   setOpen(!isOpen);
+    // };
+    return (
+      <>
+        <div className="accordion-item">
+          <div
+            className="accordion-title-bar container-fluid"
+            onClick={()=>{accordionHandler(name)}}
+          >
+            <div className="accordion-title">
+              <p className="">
+                {datas.title}
+              </p>
+            </div>
+            <div className="accordion-title-icon">
+              <span className={`horizontal ${isOpen.type == name ? 'vertical' : ''}`}>
+                <img className="" src={Arrow} />
+              </span>
+            </div>
+          </div>
+          <div className={`${isOpen.type == name ? "accordion-body-show" : "accordion-body-hide"}`}>
+            <div className="accordion-body-content" style={{display: 'flex', padding: '10px'}}>
+              <div className="rounded-[28px]" style={{width: '3px', backgroundColor: 'skyblue'}}></div>
+              <div className="flex-1">
+                <p className="" style={{padding: '0px 10px', letterSpacing:'.5px'}}>
+                  {datas.msg}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }

src/components/Service/HeaderService.js

@@ -25,10 +25,10 @@ function HeaderService({ action }) {
                             </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={site.dash_url_login}>
+                                    <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                         <i className="fal fa-user"></i> Login
                                     </a>
-                                    <a className="main-btn ml-30" href={site.dash_url_signup}>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/Service/ServiceSideMenu.js

@@ -54,7 +54,7 @@ function ServiceSideMenu() {
                             </a>
                         </li>
                         <li>
-                            <a className="item-2" href={site.android_app}>
+                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
                                 <i className="fab fa-google-play" /> Download for
                                 Android
                             </a>

src/components/Service/index.js

@@ -8,6 +8,7 @@ import Drawer from '../Mobile/Drawer';
 import DetailsService from './DetailsService';
 import HeaderService from './HeaderService';
 import HeroService from './HeroService';
+import HeroNews from '../News/HeroNews';
 
 function Service() {
     useEffect(() => {
@@ -18,7 +19,14 @@ function Service() {
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
             <HeaderService action={drawerAction.toggle} />
-            <HeroService title="Our Service to you" />
+            {/* <HeroService title="Our Service to you" /> */}
+            <HeroNews
+                title="Services"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/service', title: 'Service' },
+                ]}
+            />
             <DetailsService />
             {/*<ProjectHomeOne />*/}
             <FooterHomeOne />

src/components/UseCases/HeaderNews.js

@@ -19,7 +19,7 @@ function HeaderNews({ action }) {
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="appie-logo-box">
                                     <a href="/">
-                                        <img src={logo} alt={site.site_name} />
+                                        <img src={logo} alt={process.env.REACT_APP_SITE_NAME} />
                                     </a>
                                 </div>
                             </div>
@@ -30,10 +30,10 @@ function HeaderNews({ action }) {
                             </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={site.dash_url_login}>
+                                    <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                         <i className="fal fa-user"></i> Login
                                     </a>
-                                    <a className="main-btn ml-30" href={site.dash_url_signup}>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

src/components/UseCases/UseCase.js

@@ -31,11 +31,11 @@ function UseCase() {
                                     <div className="b-post-details">
 
                                         <h3>
-                                            <a href={site.dash_url_login}>
+                                            <a href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                                 {i.title}
                                             </a>
                                         </h3>
-                                        <a className="read-more" href={site.dash_url_login}>
+                                        <a className="read-more" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                             Learn more<i className="fal fa-arrow-right"></i>
                                         </a>
                                     </div>