about icons and faq API added

.env

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

.env.development

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

.env.production

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

public/index.html

@@ -26,6 +26,11 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>WrenchBoard</title>
+    <meta property="og:image" content="%PUBLIC_URL%/favicon.png" />
+    <meta property="business:contact_data:street_address" content="Cumberland Pkwy">
+    
+
+
     <script>
       (function (i, s, o, g, r, a, m) {
           i['GoogleAnalyticsObject'] = r;
@@ -50,6 +55,9 @@
     <!--
       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/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(`${site.user_service_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(`${site.user_service_endpoint}/faq`);
+    return await response;
+}
+
+export default FaqData;

src/assets/css/main.css

@@ -1405,8 +1405,8 @@ p {
     3.APPIE HERO css 
 ===========================*/
 .appie-hero-area {
-  padding-top: 200px;
+  padding-top: 120px;
-  padding-bottom: 110px;
+  padding-bottom: 30px;
   overflow: hidden;
   position: relative;
   z-index: 10;
@@ -1726,7 +1726,7 @@ p {
   }
 }
 .appie-hero-content > span {
-  color: #2b70fa;
+  color: #4687ba;
   font-size: 14px;
   font-weight: 500;
 }
@@ -2490,6 +2490,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;
@@ -2634,10 +2638,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 +2658,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 +2683,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;
@@ -5600,7 +5610,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 +5741,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;
@@ -5781,7 +5791,7 @@ blockquote cite {
 
 .footer-copyright {
   /* padding-top: 35px; */
-  border-top: 1px solid #e1e5ec;
+  /* border-top: 1px solid #e1e5ec; */
   margin-top: 10px;
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {

src/components/AboutUs/ServicesAbout.js

@@ -1,5 +1,16 @@
 import React from 'react';
 
+import Design from '../../assets/images/value-design.png'
+import Approach from '../../assets/images/value-approach.png'
+import Interactive from '../../assets/images/value-interactive.png'
+import Mobility from '../../assets/images/value-mobility.png'
+import Privacy from '../../assets/images/value-privacy.png'
+import Seamless from '../../assets/images/value-seamless.png'
+
+
+
+
+
 function ServicesAbout() {
     return (
         <>
@@ -20,8 +31,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="200ms"
                             >
-                                <div className="icon">
+                                <div className="icon d-flex justify-content-center align-items-center">
-                                    <i className="fal fa-tv"></i>
+                                    {/* <div className='container'>
+                                        <i className="fal fa-tv"></i>
+                                    </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>
@@ -33,8 +47,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="400ms"
                             >
-                                <div className="icon">
+                                <div className="icon d-flex justify-content-center align-items-center">
-                                    <i className="fal fa-code"></i>
+                                    {/* <div className='container'>
+                                        <i className="fal fa-code"></i>
+                                    </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>
@@ -46,8 +63,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="600ms"
                             >
-                                <div className="icon">
+                                <div className="icon d-flex justify-content-center align-items-center">
-                                    <i className="fal fa-user-friends"></i>
+                                    {/* <div className='container'>
+                                        <i className="fal fa-user-friends"></i>
+                                    </div> */}
+                                    <img src={Interactive} />
                                 </div>
                                 <h4 className="title">User Interactive</h4>
                                 <p>Email, notifications, and alerts to get you engaged in the process.</p>
@@ -59,8 +79,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="200ms"
                             >
-                                <div className="icon">
+                                <div className="icon d-flex justify-content-center align-items-center">
-                                    <i className="fal fa-mobile"></i>
+                                    {/* <div className='container'>
+                                        <i className="fal fa-mobile"></i>
+                                    </div> */}
+                                    <img src={Mobility} />
                                 </div>
                                 <h4 className="title">Mobility Approach</h4>
                                 <p>Web and native app solution for your continuously moving life.</p>
@@ -72,8 +95,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="400ms"
                             >
-                                <div className="icon">
+                                <div className="icon d-flex justify-content-center align-items-center">
-                                    <i className="fal fa-retweet"></i>
+                                    {/* <div className='container'>
+                                        <i className="fal fa-retweet"></i>
+                                    </div> */}
+                                    <img src={Seamless} />
                                 </div>
                                 <h4 className="title">Seamless Sync</h4>
                                 <p> Changes across platforms is simplified and streamlined.</p>
@@ -85,8 +111,11 @@ function ServicesAbout() {
                                 data-wow-duration="2000ms"
                                 data-wow-delay="600ms"
                             >
-                                <div className="icon">
+                                <div className="icon d-flex justify-content-center align-items-center">
-                                    <i className="fal fa-bell"></i>
+                                    {/* <div className='container'>
+                                        <i className="fal fa-bell"></i>
+                                    </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/FAQ/Index.js

@@ -0,0 +1,29 @@
+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';
+
+
+function FAQ() {
+    useEffect(() => {
+        StickyMenu();
+    });
+    const [drawer, drawerAction] = useToggle(false);
+    return (
+        <>
+            <Drawer drawer={drawer} action={drawerAction.toggle} />
+            <HeaderService action={drawerAction.toggle} />
+            <HeroService title="Frequently asked questions" />
+            <FAQService />
+            <FooterHomeOne />
+            <BackToTop />
+        </>
+    );
+}
+
+export default FAQ;

src/components/HomeOne/FeaturesHomeOne.js

@@ -9,10 +9,10 @@ import marketPlace from '../../assets/images/market_place.png';
 import task from '../../assets/images/task.png';
 import getPaid from '../../assets/images/get_paid.png';
 
-import taskThumbnail from '../../assets/images/task-thumb.png'
+// import taskThumbnail from '../../assets/images/task-thumb.png'
-import marketThumbnail from '../../assets/images/market-thumb.png'
+// import marketThumbnail from '../../assets/images/market-thumb.png'
-import getPaidThumbnail from '../../assets/images/getpaid-thumb.png'
+// import getPaidThumbnail from '../../assets/images/getpaid-thumb.png'
-import accountThumbnail from '../../assets/images/account-thumb.png'
+// import accountThumbnail from '../../assets/images/account-thumb.png'
 
 
 import getConfig from './../../Config/config'
@@ -20,104 +20,105 @@ import getConfig from './../../Config/config'
 function FeaturesHomeOne({ className }) {
     var site = getConfig()[0];
     return (
-        <section className={`appie-service-area features-section pt-50 pb-100 ${className}`} id="service">
+        <></>
-            <div className="container">
+        // <section className={`appie-service-area features-section pt-50 pb-100 ${className}`} id="service">
-                <div className="row">
+        //     <div className="container">
-                    <div className="col-xl-3 col-md-6 mb-50">
+        //         <div className="row">
-                        <div
+        //             <div className="col-xl-3 col-md-6 mb-50">
-                            className="appie-features-content wow animated fadeInRight"
+        //                 <div
-                            data-wow-duration="2000ms"
+        //                     className="appie-features-content wow animated fadeInRight"
-                            data-wow-delay="600ms"
+        //                     data-wow-duration="2000ms"
-                        >
+        //                     data-wow-delay="600ms"
-                            <div className='text-center'>
+        //                 >
-                                <img className='pb-2' src={accountThumbnail} alt='image thumbnail' />
+        //                     <div className='text-center'>
-                            </div>
+        //                         <img className='pb-2' src={accountThumbnail} alt='image thumbnail' />
+        //                     </div>
                             
-                            <h3 className="title">
+        //                     <h3 className="title">
-                                Create free account.
+        //                         Create free account.
-                            </h3>
+        //                     </h3>
-                            <p>
+        //                     <p>
-                                If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities.
+        //                         If you are either currently employed, unemployed or unsatisfied with your job or want extra cash on the side, consider WrenchBoard as a reliable partner to connect you with new opportunities.
-                            </p>
+        //                     </p>
-                            <Link className="main-btn" to="/about-us">
+        //                     <Link className="main-btn" to="/about-us">
-                                Learn More
+        //                         Learn More
-                            </Link>
+        //                     </Link>
-                            {/* <div
+        //                     {/* <div
-                                className="appie-features-thumb text-center wow animated fadeInUp"
+        //                         className="appie-features-thumb text-center wow animated fadeInUp"
-                                data-wow-duration="2000ms"
+        //                         data-wow-duration="2000ms"
-                                data-wow-delay="200ms"
+        //                         data-wow-delay="200ms"
-                            >
+        //                     >
-                                <img className='p-3' src={freeAccount} alt="" />
+        //                         <img className='p-3' src={freeAccount} alt="" />
-                            </div> */}
+        //                     </div> */}
-                        </div>
+        //                 </div>
-                    </div>
+        //             </div>
-                    <div className="col-xl-3 col-md-6 mb-50">
+        //             <div className="col-xl-3 col-md-6 mb-50">
-                        <div
+        //                 <div
-                            className="appie-features-content animated fadeInRight"
+        //                     className="appie-features-content animated fadeInRight"
-                            data-wow-duration="2000ms"
+        //                     data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
+        //                     data-wow-delay="600ms"
-                        >
+        //                 >
-                            <div className='text-center'>
+        //                     <div className='text-center'>
-                                <img className='pb-2' src={marketThumbnail} alt='image thumbnail' />
+        //                         <img className='pb-2' src={marketThumbnail} alt='image thumbnail' />
-                            </div>
+        //                     </div>
                             
-                            <h3 className="title">
+        //                     <h3 className="title">
-                                Browse Marketplace
+        //                         Browse Marketplace
-                            </h3>
+        //                     </h3>
-                            <p>
+        //                     <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.
+        //                     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>
+        //                     </p>
-                            <a className="main-btn" href={site.dash_url_login}>
+        //                     <a className="main-btn" href={site.dash_url_login}>
-                                Learn More
+        //                         Learn More
-                            </a>
+        //                     </a>
-                        </div>
+        //                 </div>
-                    </div>
+        //             </div>
-                    <div className="col-xl-3 col-md-6 mb-50">
+        //             <div className="col-xl-3 col-md-6 mb-50">
-                        <div
+        //                 <div
-                            className="appie-features-content animated fadeInRight"
+        //                     className="appie-features-content animated fadeInRight"
-                            data-wow-duration="2000ms"
+        //                     data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
+        //                     data-wow-delay="600ms"
-                        >
+        //                 >
-                            <div className='text-center'>
+        //                     <div className='text-center'>
-                                <img className='pb-2' src={taskThumbnail} alt='image thumbnail' />
+        //                         <img className='pb-2' src={taskThumbnail} alt='image thumbnail' />
-                            </div>
+        //                     </div>
                             
-                            <h3 className="title">
+        //                     <h3 className="title">
-                            Complete Task
+        //                     Complete Task
-                            </h3>
+        //                     </h3>
-                            <p>
+        //                     <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.
+        //                         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>
+        //                     </p>
-                            <a className="main-btn" href={site.dash_url_login}>
+        //                     <a className="main-btn" href={site.dash_url_login}>
-                                Learn More
+        //                         Learn More
-                            </a>
+        //                     </a>
-                        </div>
+        //                 </div>
-                    </div>
+        //             </div>
-                    <div className="col-xl-3 col-md-6 mb-50">
+        //             <div className="col-xl-3 col-md-6 mb-50">
-                        <div
+        //                 <div
-                            className="appie-features-content animated fadeInRight"
+        //                     className="appie-features-content animated fadeInRight"
-                            data-wow-duration="2000ms"
+        //                     data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
+        //                     data-wow-delay="600ms"
-                        >
+        //                 >
-                            <div className='text-center'>
+        //                     <div className='text-center'>
-                                <img className='pb-2' src={getPaidThumbnail} alt='image thumbnail' />
+        //                         <img className='pb-2' src={getPaidThumbnail} alt='image thumbnail' />
-                            </div>
+        //                     </div>
                             
-                            <h3 className="title">
+        //                     <h3 className="title">
-                                Get Paid
+        //                         Get Paid
-                            </h3>
+        //                     </h3>
-                            <p>
+        //                     <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.
+        //                         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>
+        //                     </p>
-                            <a className="main-btn" href={site.dash_url_login}>
+        //                     <a className="main-btn" href={site.dash_url_login}>
-                                Learn More
+        //                         Learn More
-                            </a>
+        //                     </a>
-                        </div>
+        //                 </div>
-                    </div>
+        //             </div>
-                </div>
+        //         </div>
-            </div>
+        //     </div>
-            {/* <hr className='mt-50'/> */}
+        //     {/* <hr className='mt-50'/> */}
-        </section>
+        // </section>
     );
 }
 

src/components/HomeOne/FeaturesHomeOne.js.rej

@@ -1,14 +0,0 @@
-diff a/src/components/HomeOne/FeaturesHomeOne.js b/src/components/HomeOne/FeaturesHomeOne.js	(rejected hunks)
-@@ -1,9 +1,9 @@
- import React, { useState } from 'react';
- import { Link } from 'react-router-dom';
--import thumb from '../../assets/images/HowItWorks.jpg';
-+import thumb from '../../assets/images/ACC.jpg';
- import thumb2 from '../../assets/images/MarketPlace004.jpg';
--import thumb3 from '../../assets/images/CompleteTask.jpg';
--import thumb4 from '../../assets/images/MoneyPay.jpg';
-+import thumb3 from '../../assets/images/CompleteTask002.jpg';
-+import thumb4 from '../../assets/images/MoneyBitPay.jpg';
- 
- import shapeSix from '../../assets/images/shape/shape-6.png';
- import shapeSeven from '../../assets/images/shape/shape-7.png';

src/components/HomeOne/FooterHomeOne.js

@@ -5,6 +5,7 @@ import getConfig from './../../Config/config'
 
 function FooterHomeOne({ className }) {
     var site = getConfig()[0];
+    let newDate = new Date().getFullYear()
 
     return (
         <>
@@ -124,7 +125,7 @@ function FooterHomeOne({ className }) {
                                     </ul>
                                 </div>
                                 <div className="copyright-text">
-                                    <p>Copyright © 2022 WrenchBoard. All rights reserved.</p>
+                                    <p>Copyright © {newDate} WrenchBoard. All rights reserved.</p>
                                 </div>
                             </div>
                         </div>

src/components/HomeOne/HeroHomeOne.js

@@ -18,10 +18,10 @@ function HeroHomeOne() {
                             <div className="appie-hero-content">
                                 <span>Welcome To WrenchBoard..</span>
                                 <h1 className="appie-title">
-                                    Make money with any skill.
+                                    Earn Money with Any Skill.
                                 </h1>
                                 <p>
-                                    The marketplace to make money from your skills, find, buy and sell professional services. Connect with freelancers to get work done faster.
+                                    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>

src/components/HomeOne/TrafficHomeTwo.js

@@ -52,13 +52,13 @@ function TrafficHomeOne() {
                                     <p>Get your account credited when the job is completed, and the client authorizes payment.</p>
                                 </div>
                             </div>
-                            <div className="col-lg-12">
+                            {/* <div className="col-lg-12">
                                 <div className="traffic-btn mt-50">
                                     <a className="main-btn" href={site.dash_url_login}>
                                         Login <i className="fal fa-arrow-right" />
                                     </a>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>

src/components/Service/FAQServices.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import thumb from '../../assets/images/service-page.jpg';
+import ServiceSideMenu from './ServiceSideMenu';
+import getConfig from './../../Config/config'
+import {Link} from 'react-router-dom'
+import FaqData from '../../Services/FaqData';
+
+function FAQService() {
+    let [faq, setFaq] = useState([])
+
+    useEffect(()=>{
+        FaqData().then(res => {
+            console.log(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">
+                            <div className="service-details-content">
+                                <div className="container-fluid">
+                                    <h3>Frequently asked questions</h3>
+                                </div>
+                                <div class="accordion" id="accordionExample">
+                                    {faq.map((item, index)=>(
+                                        <div key={index} class="card">
+                                            <div class="card-header" id={`heading${index}`}>
+                                                <h2 class="mb-0">
+                                                    <button class="btn btn-block text-left" type="button" data-toggle="collapse" data-target={`#collapse${index}`} aria-expanded="true" aria-controls={`collapse${index}`}>
+                                                    {item.title}
+                                                    </button>
+                                                </h2>
+                                            </div>
+    
+                                            <div id={`collapse${index}`} class={`${index > 0 ? 'collapse' : 'collapse show'}`} aria-labelledby={`heading${index}`} data-parent="#accordionExample">
+                                            <div class="card-body">
+                                                {item.msg}
+                                            </div>
+                                            </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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default FAQService;