font fixing in about and services page

.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

@@ -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;
 }
 
@@ -2668,13 +2681,16 @@ p {
 .service-details-content .content .title {
   font-size: 30px;
   margin-bottom: 18px;
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
-.service-details-content .content span {
-  font-size: 20px;
-  line-height: 30px;
-  color: #0e1133;
-  padding-top: 34px;
-  padding-bottom: 26px;
+.service-details-content .content p {
+  font-size: 18px;
+  line-height: 28px;
+  padding: 10px 0px;
+}
+.service-details-content .content p a {
+  color: #4687ba;
 }
 
 .appie-services-8-area .service-thumb {
@@ -2992,6 +3008,7 @@ p {
   position: relative;
   overflow: hidden;
   z-index: 15;
+  background-color: #fbf4fe;
 }
 .appie-traffic-area .traffic-thumb {
   position: absolute;
@@ -3026,9 +3043,14 @@ p {
   color: #2b70fa;
 }
 .appie-traffic-title .title {
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
   font-size: 44px;
   line-height: 54px;
 }
+.appie-traffic-title p {
+  font-size: 16px;
+}
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-traffic-title .title {
     font-size: 36px;
@@ -5600,7 +5622,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 +5753,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;
@@ -6280,6 +6302,8 @@ blockquote cite {
 }
 .appie-about-top-title .title {
   font-size: 60px;
+  letter-spacing: 2px;
+  text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
   position: relative;
   z-index: 10;
 }
@@ -8219,3 +8243,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

@@ -17,7 +17,7 @@ function ServicesAbout() {
             <section className="appie-services-2-area pt-90 pb-55" id="service">
                 <div className="container">
                     <div className="row align-items-end">
-                        <div className="col-lg-6 col-md-8">
+                        <div className="col-12 col-md-8">
                             <div className="appie-section-title">
                                 <h3 className="appie-title">We’re driven by our values</h3>
                                 <p>The app provides design and digital marketing. </p>
@@ -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

@@ -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/DetailsPrivacy.js

@@ -15,28 +15,26 @@ function DetailsService() {
                             <div className="service-details-content">
                                
                                 <div className="content">
-                                    <h3 className="title">Privacy Policy</h3>
+                                    <h4 className="title">Privacy Policy</h4>
                                     <p>
                                     Wrenchboard issues this policy to inform users about the information we collect, the use and disclosures in the course of interactions with the WrenchBoard services by customers. We value the privacy of our customers and such strive to employ best industry standards and practices to protect their privacy. By signing up for this services, using our products or technologies offered through the WrenchBoard website, you expressly agree to the terms of this Privacy Policy.
                                     </p>
                                     <span>
                                       -
                                     </span>
+                                    <hr size="1" />
+                                    <h4 className="title">Collection of Information </h4>
                                     <p>
-
-                                    <h4>Collection of Information </h4>
                                     When you sign up for WrenchBoard platform as a user, freelancer, worker or client, you inadvertently provide certain personal information such as name and email address. This information may be used to identify or contact you as part of the service we provide. Below is information we may collect from registered users of the service.
                                     <ul class="list-group">
                                         <li class="list-group-item">We collect financial information which include bank account numbers, debit/credit account.</li>
                                         <li class="list-group-item">We also collect other personal information such as date of birth to ensure compliance to lab our regulations as the platform is strictly for persons 18 years and above.</li>
                                         <li class="list-group-item">We collect personal information (names email addresses) from you and your friends when you use our referral program. We may also receive information about you from third party sites during promotions and campaigns.</li>
                                     </ul>
-
-
                                     </p>
-                                    <p>
                                     <hr size="1" />
-                                    <h4>Use of Personal Information </h4> 
+                                    <h4 className="title">Use of Personal Information </h4> 
+                                    <p>
                                     The information we collect about you is mainly utilized to provide a secure, efficient and smooth user experience as you interact with the site. We may also utilize the information to contact you to resolve issues with your account or resolve disputes between freelancers and clients. We also use your personal information in the following ways.
                                     <ul class="list-group">
                                         <li class="list-group-item">To comply with the regulatory requirement, whenever the need arises. </li>
@@ -46,61 +44,48 @@ function DetailsService() {
                                         <li class="list-group-item">To provide some indication on the promotional offers and advertisement we direct to you. </li>
                                         <li class="list-group-item">To protect you and your information. We regularly send you notification based on activities as you use the service. </li>
                                     </ul>
-
-
-
                                     </p>
 
-                                    <p>
                                     <hr size="1" />
                                     <h4>How We Share Your Personal Information: </h4>
                                     <p>
-When you sign up to the Service as a freelancer and create a profile, we will share your limited personal information with clients or project owners for whom you may perform a task or do work for based on expression of interest. Such information will include name, profile information with experience and your ranking based on previous performance. This information will be available to the public.</p><p>
-When you register as a client or project owner and post a job in the market place or offer jobs to preselected freelancers or workers on this service, information about you, your business will be shared. This information will be based on the information provided in your profile.</p><p>
-In order to deliver a quality service on WrenchBoard, we require the services of third parties and agents such as PayPal, Quickteller Service or banks to facilitate and process transactions.</p><p>
-We may also share your personal information when and if compelled or mandated by government agencies, or court injunctions or regulatory requirement. In order to settle disputes or claims, we may also be compelled to share your information in order to deliver services to you.</p><p>
-Finally, we may share your information with companies that we plan to to merge with or to be acquired by. We will take necessary measure to ensure that all such new affiliations and corporate entities comply with the Privacy Policies hereby stated failing which you will be notified duly.</p>
-                                    </p>
-
-
-                                    <p>
+                                        When you sign up to the Service as a freelancer and create a profile, we will share your limited personal information with clients or project owners for whom you may perform a task or do work for based on expression of interest. Such information will include name, profile information with experience and your ranking based on previous performance. This information will be available to the public.</p>
+                                    <p>When you register as a client or project owner and post a job in the market place or offer jobs to preselected freelancers or workers on this service, information about you, your business will be shared. This information will be based on the information provided in your profile.</p>
+                                    <p>In order to deliver a quality service on WrenchBoard, we require the services of third parties and agents such as PayPal, Quickteller Service or banks to facilitate and process transactions.</p>
+                                    <p>We may also share your personal information when and if compelled or mandated by government agencies, or court injunctions or regulatory requirement. In order to settle disputes or claims, we may also be compelled to share your information in order to deliver services to you.</p>
+                                    <p>Finally, we may share your information with companies that we plan to to merge with or to be acquired by. We will take necessary measure to ensure that all such new affiliations and corporate entities comply with the Privacy Policies hereby stated failing which you will be notified duly.</p>
+                                
                                     <hr size="1" />
-                                   <h4> How We Use Cookies and Related Technologies.</h4>
-When you access the service or website, www.wrenchboard.com , we store small files called Cookies in your browser. Cookies and related technologies like beacons and tags are used to identify customers uniquely. With Cookies, we can track and trend the pages of interest within the website. Hence, these technologies help us focus only relevant promotions or advertisement to each customer. Through this technologies, we are able to improve the service based on the feedback from the interaction with users. We also rely on these technologies to mitigate fraudulent attempts on your WrenchBoard account.
-You may elect to disable cookies to prevent installation of cookies from the website to your browser. However, your functional experience with the service or website may be impacted. Note that you automatically disconnect from cookies when you close your browser session or log out of the service.
-
-                                    </p>
-
-
+                                   <h4 className="title"> How We Use Cookies and Related Technologies.</h4>
                                     <p>
-                                    <hr size="1" />
-                                    <h4> Measures We Take to Secure Your Information</h4>
-Your data and privacy are important to us as such we take extreme care on how we protect your information. We use a combination of industry standard encryption technologies to protect your information. Your password is not visible to our technical support team or any one in WrenchBoard. Our IT infrastructures are located in hosting facilities with strict access controls, and security protocols with only pre checked and authorized persons have access.
+                                        When you access the service or website, www.wrenchboard.com , we store small files called Cookies in your browser. Cookies and related technologies like beacons and tags are used to identify customers uniquely. With Cookies, we can track and trend the pages of interest within the website. Hence, these technologies help us focus only relevant promotions or advertisement to each customer. Through this technologies, we are able to improve the service based on the feedback from the interaction with users. We also rely on these technologies to mitigate fraudulent attempts on your WrenchBoard account. You may elect to disable cookies to prevent installation of cookies from the website to your browser. However, your functional experience with the service or website may be impacted. Note that you automatically disconnect from cookies when you close your browser session or log out of the service.
                                     </p>
 
 
-    <p>
-    <hr size="1" />
-    <h4>Updating Your Information or Opting Out.</h4> 
-    Users of this service may update the information posted in profiles or their accounts at any time. The accuracy of information posted on the profiles and accounts is entirely the responsibility of users. You may also decide to opt out the service or close your account at any time. We may also deactivate your account if you violate the terms of use of the website. Whilst we will endeavor to delete your core information in such instances, we will retain minimal records for reasons including disputes, claims or administrative purposes. Also, note that it may not be possible to delete any information you had shared with other users on the website previously.
-    </p>
+                                    <hr size="1" />
+                                    <h4 className="title"> Measures We Take to Secure Your Information</h4>
+                                    <p>
+                                        Your data and privacy are important to us as such we take extreme care on how we protect your information. We use a combination of industry standard encryption technologies to protect your information. Your password is not visible to our technical support team or any one in WrenchBoard. Our IT infrastructures are located in hosting facilities with strict access controls, and security protocols with only pre checked and authorized persons have access.
+                                    </p>
 
-   
 
-    <p>
-    <hr size="1" />
-    <h4>Deactivate/Delete your account.</h4> 
-    If you no longer wish to use our Services, you can deactivate your Services account. If you want to deactivate your account, that setting is available to you in your account settings. Otherwise, please get in touch with our support. While we close any associated process, you will not be able to access your account. Note that this process cannot be reversed since we will remove your data. If you want to use our services in the future, it will be a new account altogether.    </p>
+                                    <hr size="1" />
+                                    <h4 className="title">Updating Your Information or Opting Out.</h4> 
+                                    <p>
+                                    Users of this service may update the information posted in profiles or their accounts at any time. The accuracy of information posted on the profiles and accounts is entirely the responsibility of users. You may also decide to opt out the service or close your account at any time. We may also deactivate your account if you violate the terms of use of the website. Whilst we will endeavor to delete your core information in such instances, we will retain minimal records for reasons including disputes, claims or administrative purposes. Also, note that it may not be possible to delete any information you had shared with other users on the website previously.
+                                    </p>
 
-    <p>
+                                    <hr size="1" />
+                                    <h4 className="title">Deactivate/Delete your account.</h4> 
+                                    <p>
+                                    If you no longer wish to use our Services, you can deactivate your Services account. If you want to deactivate your account, that setting is available to you in your account settings. Otherwise, please get in touch with our support. While we close any associated process, you will not be able to access your account. Note that this process cannot be reversed since we will remove your data. If you want to use our services in the future, it will be a new account altogether.   </p>
 
-<hr size="1" />
-<h4>Changes To the Policy</h4>
-
-We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
-Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
-
-</p>
+                                    <hr size="1" />
+                                    <h4 className="title">Changes To the Policy</h4>
+                                    <p>
+                                    We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
+                                    Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
+                                    </p>
                                 </div>
                             </div>
                         </div>

src/components/Service/DetailsService.js

@@ -25,9 +25,9 @@ function DetailsService() {
                                         An open-platform for you to build your self - image, skills set, branded personality,
                                         carve a network and ofcourse an income flow with ease and satisfaction of self - actualization and accomplishments.
                                     </p>
-                                    <span>
+                                    <p>
                                         A major task done by skilled professional with personal touch and completed within the twinkling of an eye in specified time-frame.
-                                    </span>
+                                    </p>
                                     <p>
                                        WrenchBoard is the marketplace that connects independent talent 
                                        with businesses that requires your skill set and get paid.
@@ -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/DetailsTerms.js

@@ -15,21 +15,19 @@ function DetailsService() {
                             <div className="service-details-content">
                                
                                 <div className="content">
-                                    <h3 className="title">Terms of use</h3>
+                                    <h4 className="title">Terms of use</h4>
                                     <p>
                                     These Website Terms & Conditions (“T&Cs”) apply to your access and use of www.wrenchboard.com,dashboard.wrenchboard.com (the “Site”), including all software, data, reports, text, images, sounds, video, and all contents made available through any portion of the Site (collectively, the “Content”). Content includes all such elements as a whole, as well as individual elements and portions thereof.
                                     <hr />
                                     </p>
-                                    <p>
-                                    <h4>Acceptance of Terms </h4>
-                                    WRENCHBOARD permits you (“User” or “you” or “your”) to access and use the Site and Content, subject to these T&Cs. By accessing or using any portion of the Site, you acknowledge that you have read, understood, and agree to be bound by these T&Cs. If you do not agree with these T&Cs, you must not accept these T&Cs or access or use the site or content.
-                                    
+
+                                    <h4 className="title">Acceptance of Terms </h4>
+                                    <p>WRENCHBOARD permits you (“User” or “you” or “your”) to access and use the Site and Content, subject to these T&Cs. By accessing or using any portion of the Site, you acknowledge that you have read, understood, and agree to be bound by these T&Cs. If you do not agree with these T&Cs, you must not accept these T&Cs or access or use the site or content.
                                     <hr />
                                     </p>
-                                    <p>
 
-                                    <h4>General Conditions of Use </h4> 
-                                        <br />
+                                    <h4 className="title">General Conditions of Use </h4> 
+                                    <p>
                                         <b>Authorization to Access and Use Site and Content.</b> Subject to your compliance with these T&Cs and the provisions hereof, you may access or use the Site and Content solely for the purpose of your evaluation of WRENCHBOARD and WRENCHBOARD’s products and services. You may only link to the Site or Content, or any portion thereof, as expressly permitted by WRENCHBOARD.
                                         <br />
                                         <b>Ownership and Restrictions.</b> All rights, title, and interest in and to the Site and Content will remain with and belong exclusively to WRENCHBOARD. You will not (a) sublicense, resell, rent, lease, transfer, assign, time share or otherwise commercially exploit or make the Site and any Content available to any third party, (b) use the Site and Content in any unlawful manner (including without limitation in violation of any data, privacy or export control laws) or in any manner that interferes with or disrupts the integrity or performance of the Site and Content or their related components, or (c) modify, adapt or hack the Site and Content to, or try to, gain unauthorized access to the restricted portions of the Site and Content or related systems or networks (i.e., circumvent any encryption or other security measures, gain access to any source code or any other underlying form of technology or information, and gain access to any part of the Site and Content, or any other products or services of WRENCHBOARD that are not readily made available to the general public).
@@ -43,8 +41,8 @@ function DetailsService() {
 
                                     </p>
 
+                                    <h4 className="title"> Use of Intellectual Property.</h4>
                                     <p>
-                                    <h4> Use of Intellectual Property.</h4>
 
                                         <b>Rights in User Content.</b> By posting your information and other content (“User Content”) on or through the Site and Content, you grant WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable, royalty-free, fully paid, sublicensable and transferable license to use, modify, reproduce, distribute, display, publish and perform User Content in connection with the Site and Content. WRENCHBOARD has the right, but not the obligation, to monitor the Site and Content and User Content. WRENCHBOARD may remove or disable any User Content at any time for any reason, or for no reason at all. 
 
@@ -54,8 +52,8 @@ function DetailsService() {
                                     <hr />
                                     </p>
 
+                                    <h4 className="title">Feedback</h4>
                                     <p>
-                                    <h4>Feedback. </h4>
                                    
                                     You may submit ideas, suggestions, or comments (“Feedback”) regarding the Site and Content or WRENCHBOARD’s business, products, or services. By submitting any Feedback, you acknowledge and agree that (a) your Feedback is provided by you voluntarily and WRENCHBOARD may, without any obligations or limitation, use and exploit such Feedback in any manner and for any purpose, (b) you will not seek and are not entitled to any money or other form of compensation, consideration, or attribution with respect to your Feedback regardless of whether WRENCHBOARD considered or used your Feedback in any manner, and (c) your Feedback is not the confidential or proprietary information of you or any third party.
                                     <hr />
@@ -63,35 +61,32 @@ function DetailsService() {
 
 
                                     <p>
-                                   <h4> Termination of Access Due to Violations.</h4>
+                                   <h4 className="title"> Termination of Access Due to Violations.</h4>
                                    WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site and/or block your future access to the Site if we determine that you have violated these T&Cs or other agreements or guidelines which may be associated with your use of the Site. You also agree that any violation by you of these T&Cs will cause irreparable harm to WRENCHBOARD, for which monetary damages would be inadequate, and you consent to WRENCHBOARD obtaining any injunctive or equitable relief that WRENCHBOARD deems necessary or appropriate in such circumstances, without limiting WRENCHBOARD’s other available remedies. Further, WRENCHBOARD may, in its sole discretion and without prior notice, terminate your access to the Site, for cause, which includes (but is not limited to) (1) requests by law enforcement or other government agencies, (2) discontinuance or material modification of the Site or any service offered on or through the Site, or (3) unexpected technical issues or problems.
                                         <hr />
                                     </p>
 
 
+                                    <h4 className="title"> T&Cs Updates</h4>
                                     <p>
-                                    <h4> T&Cs Updates.</h4>
                                     WRENCHBOARD reserves the right, at its sole discretion, to change or modify portions of these T&Cs at any time. WRENCHBOARD will post the changes to these T&Cs on the Site and will indicate at the top of this page the date these terms were last revised. It is your responsibility to check the T&Cs periodically for changes. Your continued use of the Site and Content after the date any such changes become effective constitutes your acceptance of the new or revised T&Cs.
                                     <hr />
                                     </p>
 
 
+                                    <h4 className="title">NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD</h4> 
                                     <p>
-                                    <h4>NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD.</h4> 
                                         THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE OR VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE RESULTS THAT MAY BE OBTAINED FROM USE OF THE SITE AND CONTENT. NO INFORMATION, ADVICE OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN THESE TERMS and CONDITIONS AND YOU SHOULD NOT RELY ON THE SITE AND THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.                                   
                                         <hr/>
                                         WRENCHBOARD reserves the right to do any of the following, at any time, without notice: (1) to modify, suspend or terminate operation of or access to the Site, or any portion of the Site, for any reason; (2) to modify or change the Site, or any portion of the Site, for any reason; and (3) to interrupt the operation of the Site, or any portion of the Site, as necessary to perform routine or non-routine maintenance, error correction, or other changes.
                                         <hr />
                                     </p>
 
-<p>
-
-<h4>Changes To the Policy</h4>
-
-We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
-Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
-
-</p>
+                                    <h4 className="title">Changes To the Policy</h4>
+                                    <p>
+                                    We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
+                                    Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
+                                    </p>
                                 </div>
                             </div>
                         </div>

src/components/Service/FAQServices.js

@@ -0,0 +1,117 @@
+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">
+                                  <div className='content'>
+                                    <h3 className='p-3 text-center title'>Frequently asked questions</h3>
+                                  </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-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>