made faq to show information where public is 1

.env

@@ -2,3 +2,18 @@ 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

@@ -1,4 +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_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

@@ -1,4 +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_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'

public/index.html

@@ -55,9 +55,6 @@
     <!--
       need jv8
     -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
   <script>var LHC_API = LHC_API||{};
     LHC_API.args = {mode:'widget',lhc_base_url:'//chat.live.wrenchboard.com/',wheight:450,wwidth:350,pheight:520,pwidth:500,leaveamessage:true,check_messages:false};

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

@@ -174,34 +174,36 @@ p {
 .appie-section-title .appie-title {
   font-size: 44px;
   line-height: 54px;
-  color: #08538d;
+  /* color: #08538d; */
+  letter-spacing: 2px;
+  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 {
     font-size: 36px;
     line-height: 46px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .appie-section-title .appie-title {
     font-size: 36px;
     line-height: 46px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 @media (max-width: 767px) {
   .appie-section-title .appie-title {
     font-size: 26px;
     line-height: 36px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 @media only screen and (min-width: 576px) and (max-width: 767px) {
   .appie-section-title .appie-title {
     font-size: 36px;
     line-height: 46px;
-    color: #08538d;
+    /* color: #08538d; */
   }
 }
 .appie-section-title p {
@@ -1430,6 +1432,8 @@ p {
   line-height: 80px;
   padding: 0 80px;
   color: #08538d;
+  letter-spacing: 2px;
+  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

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import useToggle from '../../Hooks/useToggle';
 import Drawer from '../Mobile/Drawer';
-import HeaderService from '../Service/HeaderService';
-import HeroService from '../Service/HeroService';
 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() {
@@ -17,8 +17,14 @@ function FAQ() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderService action={drawerAction.toggle} />
-            <HeroService title="FAQ" />
+            <HeaderNews action={drawerAction.toggle} />
+            <HeroNews
+                title="Frequently asked questions"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/faq', title: 'Faq' },
+                ]}
+            />
             <FAQService />
             <FooterHomeOne />
             <BackToTop />

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

@@ -25,12 +25,12 @@ function HeroHomeOne() {
                                 </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>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import thumb from '../../assets/images/PerformingTask.jpg';
+import thumb from '../../assets/images/PerformingTaskNew.png';
 import getConfig from './../../Config/config'
 
 function TrafficHomeOne() {
@@ -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

@@ -1,13 +1,29 @@
-import React from 'react';
-import thumb from '../../assets/images/service-page.jpg';
+import React, { useEffect, useState } from 'react';
 import ServiceSideMenu from './ServiceSideMenu';
-import getConfig from './../../Config/config'
 import {Link} from 'react-router-dom'
+import FaqData from '../../Services/FaqData';
+import Arrow from '../../assets/images/arrow-down.png'
 
 function FAQService() {
-    var site = getConfig()[0];
+    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([])
 
-    let dummyFaq = [1,2,3,4,5]
+    useEffect(()=>{
+        FaqData().then(res => {
+            setFaq(res.data.result_list)
+        }).catch(err => {
+            console.log('You got an error ========> '+ err)
+        })
+    },[])
 
     return (
         <>
@@ -17,32 +33,37 @@ function FAQService() {
                         <div className="col-lg-4">
                             <ServiceSideMenu />
                         </div>
-                        <div className="col-lg-8">
-                            <div className="faq-details-content">
+                        <div className="col-lg-8 accordion-wrapper">
+                            <div className="p-3 service-details-content accordion-con">
                                 <div className="container-fluid">
-                                    <h1 className='display-4'>Frequently asked questions</h1>
+                                    <h3 className='p-3 text-center'>Frequently asked questions</h3>
                                 </div>
-                                <div class="accordion" id="accordionExample">
-                                    {dummyFaq.map((item, index)=>(
-                                        <div key={index} class="card">
-                                            <div class="card-header" id={`heading${index}`}>
-                                            <h2 class="mb-0">
-                                                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target={`#collapse${index}`} aria-expanded="true" aria-controls={`collapse${index}`}>
-                                                Item {index+1}
-                                                </button>
-                                            </h2>
-                                            </div>
-    
-                                            <div id={`collapse${index}`} class={`${index > 0 ? 'collapse' : 'collapse show'}`} aria-labelledby={`heading${index}`} data-parent="#accordionExample">
-                                            <div class="card-body">
-                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-                                            </div>
-                                            </div>
-                                        </div>
-                                    ))}
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0 && item.public != 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 && item.public != 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-2'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
+                                    <p className='my-4'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
                                 </div>
                             </div>
                         </div>
@@ -53,4 +74,42 @@ function FAQService() {
     );
 }
 
-export default FAQService;
+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>