faq breadcrumb added, faq layout changed

.env

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

.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;

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-bottom: 110px;
+  padding-top: 120px;
+  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) {
@@ -8219,3 +8229,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/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">
-                                    <i className="fal fa-tv"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <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">
-                                    <i className="fal fa-code"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <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">
-                                    <i className="fal fa-user-friends"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <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">
-                                    <i className="fal fa-mobile"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <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">
-                                    <i className="fal fa-retweet"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <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">
-                                    <i className="fal fa-bell"></i>
+                                <div className="icon d-flex justify-content-center align-items-center">
+                                    {/* <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,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/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 marketThumbnail from '../../assets/images/market-thumb.png'
-import getPaidThumbnail from '../../assets/images/getpaid-thumb.png'
-import accountThumbnail from '../../assets/images/account-thumb.png'
+// import taskThumbnail from '../../assets/images/task-thumb.png'
+// import marketThumbnail from '../../assets/images/market-thumb.png'
+// import getPaidThumbnail from '../../assets/images/getpaid-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">
-                <div className="row">
-                    <div className="col-xl-3 col-md-6 mb-50">
-                        <div
-                            className="appie-features-content wow animated fadeInRight"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
-                        >
-                            <div className='text-center'>
-                                <img className='pb-2' src={accountThumbnail} alt='image thumbnail' />
-                            </div>
+        <></>
+        // <section className={`appie-service-area features-section pt-50 pb-100 ${className}`} id="service">
+        //     <div className="container">
+        //         <div className="row">
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content wow animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={accountThumbnail} alt='image thumbnail' />
+        //                     </div>
                             
-                            <h3 className="title">
-                                Create free account.
-                            </h3>
-                            <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.
-                            </p>
-                            <Link className="main-btn" to="/about-us">
-                                Learn More
-                            </Link>
-                            {/* <div
-                                className="appie-features-thumb text-center wow animated fadeInUp"
-                                data-wow-duration="2000ms"
-                                data-wow-delay="200ms"
-                            >
-                                <img className='p-3' src={freeAccount} alt="" />
-                            </div> */}
-                        </div>
-                    </div>
-                    <div className="col-xl-3 col-md-6 mb-50">
-                        <div
-                            className="appie-features-content animated fadeInRight"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
-                        >
-                            <div className='text-center'>
-                                <img className='pb-2' src={marketThumbnail} alt='image thumbnail' />
-                            </div>
+        //                     <h3 className="title">
+        //                         Create free account.
+        //                     </h3>
+        //                     <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.
+        //                     </p>
+        //                     <Link className="main-btn" to="/about-us">
+        //                         Learn More
+        //                     </Link>
+        //                     {/* <div
+        //                         className="appie-features-thumb text-center wow animated fadeInUp"
+        //                         data-wow-duration="2000ms"
+        //                         data-wow-delay="200ms"
+        //                     >
+        //                         <img className='p-3' src={freeAccount} alt="" />
+        //                     </div> */}
+        //                 </div>
+        //             </div>
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={marketThumbnail} alt='image thumbnail' />
+        //                     </div>
                             
-                            <h3 className="title">
-                                Browse Marketplace
-                            </h3>
-                            <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}>
-                                Learn More
-                            </a>
-                        </div>
-                    </div>
-                    <div className="col-xl-3 col-md-6 mb-50">
-                        <div
-                            className="appie-features-content animated fadeInRight"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
-                        >
-                            <div className='text-center'>
-                                <img className='pb-2' src={taskThumbnail} alt='image thumbnail' />
-                            </div>
+        //                     <h3 className="title">
+        //                         Browse Marketplace
+        //                     </h3>
+        //                     <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}>
+        //                         Learn More
+        //                     </a>
+        //                 </div>
+        //             </div>
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={taskThumbnail} alt='image thumbnail' />
+        //                     </div>
                             
-                            <h3 className="title">
-                            Complete Task
-                            </h3>
-                            <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}>
-                                Learn More
-                            </a>
-                        </div>
-                    </div>
-                    <div className="col-xl-3 col-md-6 mb-50">
-                        <div
-                            className="appie-features-content animated fadeInRight"
-                            data-wow-duration="2000ms"
-                            data-wow-delay="600ms"
-                        >
-                            <div className='text-center'>
-                                <img className='pb-2' src={getPaidThumbnail} alt='image thumbnail' />
-                            </div>
+        //                     <h3 className="title">
+        //                     Complete Task
+        //                     </h3>
+        //                     <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}>
+        //                         Learn More
+        //                     </a>
+        //                 </div>
+        //             </div>
+        //             <div className="col-xl-3 col-md-6 mb-50">
+        //                 <div
+        //                     className="appie-features-content animated fadeInRight"
+        //                     data-wow-duration="2000ms"
+        //                     data-wow-delay="600ms"
+        //                 >
+        //                     <div className='text-center'>
+        //                         <img className='pb-2' src={getPaidThumbnail} alt='image thumbnail' />
+        //                     </div>
                             
-                            <h3 className="title">
-                                Get Paid
-                            </h3>
-                            <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}>
-                                Learn More
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* <hr className='mt-50'/> */}
-        </section>
+        //                     <h3 className="title">
+        //                         Get Paid
+        //                     </h3>
+        //                     <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}>
+        //                         Learn More
+        //                     </a>
+        //                 </div>
+        //             </div>
+        //         </div>
+        //     </div>
+        //     {/* <hr className='mt-50'/> */}
+        // </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,115 @@
+import React, { useEffect, useState } from 'react';
+import ServiceSideMenu from './ServiceSideMenu';
+import {Link} from 'react-router-dom'
+import FaqData from '../../Services/FaqData';
+import Arrow from '../../assets/images/arrow-down.png'
+
+function FAQService() {
+    const [isOpen, setOpen] = React.useState({type: 'faq0'});
+    const accordionHandler = (name) => {
+      setOpen(prev => {
+        if(prev.type == name){
+            return {type: ''}
+        }else {
+            return {type: name}
+        }
+      });
+    };
+    let [faq, setFaq] = useState([])
+
+    useEffect(()=>{
+        FaqData().then(res => {
+            setFaq(res.data.result_list)
+        }).catch(err => {
+            console.log('You got an error ========> '+ err)
+        })
+    },[])
+
+    return (
+        <>
+            <section className="appie-service-details-area pt-100 pb-100">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-4">
+                            <ServiceSideMenu />
+                        </div>
+                        <div className="col-lg-8 accordion-wrapper">
+                            <div className="p-3 service-details-content accordion-con">
+                                <div className="container-fluid">
+                                    <h3 className='p-3 text-center'>Frequently asked questions</h3>
+                                </div>
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                </div>
+                                <div className='container-fluid text-center'>
+                                    <p className='my-4'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default FAQService;
+
+export function Accordion({ datas, name, accordionHandler, isOpen }) {
+    // const [isOpen, setOpen] = React.useState(false);
+    // const accordionHandler = () => {
+    //   setOpen(!isOpen);
+    // };
+    return (
+      <>
+        <div className="accordion-item">
+          <div
+            className="accordion-title-bar container-fluid"
+            onClick={()=>{accordionHandler(name)}}
+          >
+            <div className="accordion-title">
+              <p className="">
+                {datas.title}
+              </p>
+            </div>
+            <div className="accordion-title-icon">
+              <span className={`horizontal ${isOpen.type == name ? 'vertical' : ''}`}>
+                <img className="" src={Arrow} />
+              </span>
+            </div>
+          </div>
+          <div className={`${isOpen.type == name ? "accordion-body-show" : "accordion-body-hide"}`}>
+            <div className="accordion-body-content" style={{display: 'flex', padding: '10px'}}>
+              <div className="rounded-[28px]" style={{width: '3px', backgroundColor: 'skyblue'}}></div>
+              <div className="flex-1">
+                <p className="" style={{padding: '0px 10px', letterSpacing:'.5px'}}>
+                  {datas.msg}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }