This commit is contained in:
2021-12-23 04:00:42 -05:00
parent 3bb74ab465
commit 4bb6316f88
16 changed files with 215 additions and 232 deletions
+53 -142
View File
@@ -1,158 +1,69 @@
import React, { useState } from 'react';
import React from 'react';
import thumb from '../../assets/images/traffic-thumb.png';
function FaqHomeOne({ className }) {
const [showQues, setQues] = useState(1);
const openQuestion = (value) => {
setQues(value);
};
function TrafficHomeOne({ className }) {
return (
<>
<section className={`appie-faq-area pb-95 ${className || ''}`}>
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="appie-section-title text-center">
<h3 className="appie-title">Frequently asked questions</h3>
<p>Different layouts and styles for team sections.</p>
</div>
<section section className={`appie-faq-area pt-90 pb-95 ${className}`}>
<div className="container">
<div className="row">
<div className="col-lg-7">
<div className="appie-traffic-title">
<span>Post</span>
<h3 className="title">Posting Jobs.</h3>
<p>
WrenchBoard platform connects you with quality service to deliver your project with ease.
</p>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div
className="faq-accordion wow fadeInRight mt-30"
data-wow-duration="1500ms"
>
<div
className="accrodion-grp animated fadeIn faq-accrodion wow"
data-wow-duration="1500ms"
data-grp-name="faq-accrodion"
>
<div
onClick={() => openQuestion(1)}
className={`accrodion ${showQues === 1 ? 'active' : ''}`}
>
<div className="accrodion-inner">
<div className="accrodion-title">
<h4>Where do I usually find FAQs in a page?</h4>
</div>
<div
className="accrodion-content"
style={{
display: showQues === 1 ? 'block' : 'none',
}}
>
<div className="inner">
<p>
Naff Oxford vagabond in my flat chinwag
blatant grub tomfoolery that I bits and bobs
up the duff cras boot bevvy no biggie.
</p>
</div>
</div>
</div>
</div>
<div
onClick={() => openQuestion(2)}
className={`accrodion ${showQues === 2 ? 'active' : ''}`}
>
<div className="accrodion-inner">
<div className="accrodion-title">
<h4>Where do I usually find FAQs in a page?</h4>
</div>
<div
className="accrodion-content"
style={{
display: showQues === 2 ? 'block' : 'none',
}}
>
<div className="inner">
<p>
Naff Oxford vagabond in my flat chinwag
blatant grub tomfoolery that I bits and bobs
up the duff cras boot bevvy no biggie.
</p>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6">
<div className="appie-traffic-service mb-30">
<div className="icon">
<i className="fal fa-check" />
</div>
<h5 className="title">Create your projects</h5>
<p>from complex to most basic task as targeted offering or market place posting</p>
</div>
</div>
</div>
<div className="col-lg-6">
<div
className="faq-accordion wow fadeInRight mt-30"
data-wow-duration="1500ms"
>
<div
className="accrodion-grp animated fadeIn faq-accrodion wow"
data-wow-duration="1500ms"
data-grp-name="faq-accrodion"
>
<div
onClick={() => openQuestion(3)}
className={`accrodion ${showQues === 3 ? 'active' : ''}`}
>
<div className="accrodion-inner">
<div className="accrodion-title">
<h4>Where do I usually find FAQs in a page?</h4>
</div>
<div
className="accrodion-content"
style={{
display: showQues === 3 ? 'block' : 'none',
}}
>
<div className="inner">
<p>
Naff Oxford vagabond in my flat chinwag
blatant grub tomfoolery that I bits and bobs
up the duff cras boot bevvy no biggie.
</p>
</div>
</div>
</div>
</div>
<div
onClick={() => openQuestion(4)}
className={`accrodion ${showQues === 4 ? 'active' : ''}`}
>
<div className="accrodion-inner">
<div className="accrodion-title">
<h4>Where do I usually find FAQs in a page?</h4>
</div>
<div
className="accrodion-content"
style={{
display: showQues === 4 ? 'block' : 'none',
}}
>
<div className="inner">
<p>
Naff Oxford vagabond in my flat chinwag
blatant grub tomfoolery that I bits and bobs
up the duff cras boot bevvy no biggie.
</p>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="appie-traffic-service item-2 mb-30">
<div className="icon">
<i className="fal fa-check" />
</div>
<h5 className="title">Hire experts</h5>
<p>from reviewed profiles, accept interest in your project from qualified members.</p>
</div>
</div>
</div>
<div className="col-lg-12">
<div className="faq-text text-center pt-40">
<p>
Can't find an answer?{' '}
<a href="mailto:demo@gmail.com">Email us</a>
</p>
<div className="col-lg-6 col-md-6">
<div className="appie-traffic-service item-3">
<div className="icon">
<i className="fal fa-check" />
</div>
<h5 className="title">Monitor Progress</h5>
<p>Monitor work progress and track performance with real time tools from your account</p>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="appie-traffic-service item-4">
<div className="icon">
<i className="fal fa-check" />
</div>
<h5 className="title">Get Pay </h5>
<p>Pay: Make payment easily and securely by milestones or project completion.</p>
</div>
</div>
<div className="col-lg-12">
<div className="traffic-btn mt-50">
<a className="main-btn" href="#">
Learn more about what you can do with WrenchBoard <i className="fal fa-arrow-right" />
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</>
</div>
</section>
);
}
export default FaqHomeOne;
export default TrafficHomeOne;