WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

more clean up for that section

Browse Source
This commit is contained in:
Ebube
2023-08-28 18:34:17 +01:00
parent f3eb3858e1
commit 8927614cd6
2 changed files with 109 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeOne/ServicesHomeOne.js
+64 -75
View File
@@ -4,80 +4,69 @@ import IconTwo from '../../assets/images/icon/Findtaskicon.png';
import IconThree from '../../assets/images/icon/taskicon.png';
import IconFour from '../../assets/images/icon/walleticon.png';
// import FirstSlide from '../../assets/images/icon/Untitledxyz.png';
function ServicesHomeOne({ className }) {
return (
<section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="appie-section-title text-center">
<h3 className="appie-title">
Start getting paid in easy steps.
</h3>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-3 col-md-6">
<div
className="appie-single-service text-center mt-30 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<div className="icon">
<img src={IconOne} alt="" />
</div>
<h4 className="appie-title">Free Account</h4>
<p>Join WrenchBoard.<span>Create an account for Income.</span></p>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div
className="appie-single-service text-center mt-30 item-2 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="icon">
<img src={IconTwo} alt="" />
</div>
<h4 className="appie-title">Find Task </h4>
<p>Build a Self-Portfolio <span>with sole purpose to Cash-Out.</span></p>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div
className="appie-single-service text-center mt-30 item-3 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="600ms"
>
<div className="icon">
<img src={IconThree} alt="" />
</div>
<h4 className="appie-title">Complete</h4>
<p>Organize and Manage <span>your teams efficiently. </span> Manage your workgroup.</p>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div
className="appie-single-service text-center mt-30 item-4 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="800ms"
>
<div className="icon">
<img src={IconFour} alt="" />
</div>
<h4 className="appie-title">Get Paid</h4>
<p>Start <span>Boosting your Income </span> By earning Cash for your Time and Skills.</p>
</div>
</div>
</div>
</div>
</section>
);
function ServiceItem({ icon, title, description, index }) {
return (
<div className="appie-single-service text-center mt-30 wow animated fadeInUp" data-wow-duration="2000ms" data-wow-delay={`${200 * (index + 1)}`} style={{ cursor: "default" }}>
<div className="icon">
<img src={icon} alt={title} />
</div>
<h4 className="appie-title">{title}</h4>
<p>{description}</p>
</div>
);
}
export default ServicesHomeOne;
function ServicesHomeOne({ className }) {
const serviceItems = [
{
icon: IconOne,
title: 'Free Account',
description: 'Join WrenchBoard. Create an account for Income.',
},
{
icon: IconTwo,
title: 'Find Task',
description: 'Build a Self-Portfolio with sole purpose to Cash-Out.',
},
{
icon: IconThree,
title: 'Complete',
description: 'Organize and Manage your teams efficiently. Manage your workgroup.',
},
{
icon: IconFour,
title: 'Get Paid',
description: 'Start Boosting your Income by earning Cash for your Time and Skills.',
},
];
return (
<section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="appie-section-title text-center">
<h3 className="appie-title">
Start getting paid in easy steps.
</h3>
</div>
</div>
</div>
<div className="row">
{serviceItems.map(({ icon, title, description }, index) => (
<div key={index} className="col-lg-3 col-md-6">
<ServiceItem
icon={icon}
title={title}
description={description}
index={index}
/>
</div>
))}
</div>
</div>
</section>
);
}
export default ServicesHomeOne;