dev-chiefworks
239 lines
14 KiB
JavaScript
239 lines
14 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import thumb from '../../assets/images/HowItWorks.jpg';
|
|
import thumb2 from '../../assets/images/HowItWorks.jpg';
|
|
import thumb3 from '../../assets/images/HowItWorks.jpg';
|
|
import thumb4 from '../../assets/images/HowItWorks.jpg';
|
|
|
|
import shapeSix from '../../assets/images/shape/shape-6.png';
|
|
import shapeSeven from '../../assets/images/shape/shape-7.png';
|
|
import shapeEight from '../../assets/images/shape/shape-8.png';
|
|
|
|
function FeaturesHomeOne({ className }) {
|
|
const [tab, setTab] = useState('setting');
|
|
const handleClick = (e, value) => {
|
|
e.preventDefault();
|
|
setTab(value);
|
|
};
|
|
return (
|
|
<section className={`appie-features-area pt-100 pb-90 ${className}`} id="features">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-3">
|
|
<div className="appie-features-tabs-btn">
|
|
<div
|
|
className="nav flex-column nav-pills"
|
|
id="v-pills-tab"
|
|
role="tablist"
|
|
aria-orientation="vertical"
|
|
>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'setting')}
|
|
className={`nav-link ${tab === 'setting' ? 'active' : ''}`}
|
|
id="v-pills-home-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-home"
|
|
role="tab"
|
|
aria-controls="v-pills-home"
|
|
aria-selected="true"
|
|
>
|
|
<i className="fas fa-cog" /> Create free Account
|
|
</a>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'report')}
|
|
className={`nav-link ${tab === 'report' ? 'active' : ''}`}
|
|
id="v-pills-profile-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-profile"
|
|
role="tab"
|
|
aria-controls="v-pills-profile"
|
|
aria-selected="false"
|
|
>
|
|
<i className="fas fa-exclamation-triangle" /> WrenchBoard Marketplace
|
|
</a>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'notice')}
|
|
className={`nav-link ${tab === 'notice' ? 'active' : ''}`}
|
|
id="v-pills-messages-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-messages"
|
|
role="tab"
|
|
aria-controls="v-pills-messages"
|
|
aria-selected="false"
|
|
>
|
|
<i className="fas fa-bell" /> Complete Task
|
|
</a>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'app')}
|
|
className={`nav-link ${tab === 'app' ? 'active' : ''}`}
|
|
id="v-pills-settings-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-settings"
|
|
role="tab"
|
|
aria-controls="v-pills-settings"
|
|
aria-selected="false"
|
|
>
|
|
<i className="fas fa-lock" /> Get Paid
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-9">
|
|
<div className="tab-content" id="v-pills-tabContent">
|
|
<div
|
|
className={`${
|
|
tab === 'setting' ? 'show active' : ''
|
|
} tab-pane fade`}
|
|
id="v-pills-home"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-home-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center wow animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<img src={thumb} alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content wow animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>Turn Up your Talent </span>
|
|
<h3 className="title">
|
|
How It Works 1
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`${tab === 'report' ? 'show active' : ''} tab-pane fade`}
|
|
id="v-pills-profile"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-profile-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<img src={thumb2} alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>Turn Up your Talent </span>
|
|
<h3 className="title">
|
|
How It Works 2
|
|
</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>
|
|
<a className="main-btn" href="#">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`${tab === 'notice' ? 'show active' : ''} tab-pane fade`}
|
|
id="v-pills-messages"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-messages-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<img src={thumb3} alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>Turn Up your Talent </span>
|
|
<h3 className="title">
|
|
How It Works 3
|
|
</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>
|
|
<a className="main-btn" href="#">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`${tab === 'app' ? 'show active' : ''} tab-pane fade`}
|
|
id="v-pills-settings"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-settings-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<img src={thumb4} alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>Turn Up your Talent </span>
|
|
<h3 className="title">
|
|
Get Paid
|
|
</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>
|
|
<a className="main-btn" href="#">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default FeaturesHomeOne;
|