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"

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

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

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

@@ -20,6 +20,9 @@ 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}>
@@ -33,9 +36,6 @@ function HeroHomeOne() {
                                         </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/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>
+      </>
+    );
+  }