victorAnumudu
77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import IconOne from '../../assets/images/icon/account_login.png';
|
|
import IconTwo from '../../assets/images/icon/task.png';
|
|
import IconThree from '../../assets/images/icon/target.png';
|
|
import IconFour from '../../assets/images/icon/reward.png';
|
|
|
|
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)}ms`}
|
|
style={{ cursor: "default" }}
|
|
>
|
|
<div className="icon">
|
|
<img src={icon} alt={title} />
|
|
</div>
|
|
<h4 className="appie-title">{title}</h4>
|
|
<p>{description}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ServicesHomeOne({ className }) {
|
|
const serviceTitle = "Set Goals and Rewards to Inspire";
|
|
const serviceItems = [
|
|
{
|
|
icon: IconOne,
|
|
title: 'Free Account',
|
|
description: 'Join WrenchBoard. Get your free account.',
|
|
},
|
|
{
|
|
icon: IconTwo,
|
|
title: 'Set Goals',
|
|
description: 'Suggest or find what you want to get rewarded for.',
|
|
},
|
|
{
|
|
icon: IconThree,
|
|
title: 'Complete',
|
|
description: 'Complete task, and notify assigner with ease.',
|
|
},
|
|
{
|
|
icon: IconFour,
|
|
title: 'Reward',
|
|
description: 'Task completed. Find your reward.',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={`appie-service-area pt-10 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">{serviceTitle}</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;
|