Merge branch 'Performing-task-Text-and-Image' of WrenchBoard/WrenchBoardMainSite into master
This commit is contained in:
Gogs
@@ -4,80 +4,70 @@ 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)}ms`} 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 serviceTitle = ""
|
||||
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">
|
||||
{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;
|
||||
@@ -3,77 +3,61 @@ import thumb from '../../assets/images/PerformingTaskNew.png';
|
||||
import getConfig from './../../Config/config'
|
||||
|
||||
function TrafficHomeOne() {
|
||||
var site = getConfig()[0];
|
||||
return (
|
||||
<section className="appie-traffic-area pt-140 pb-180">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-traffic-title">
|
||||
<h3 className="title">On WrenchBoard.</h3>
|
||||
<p>
|
||||
Performing task on WrenchBoard is easy. All you need is a free account.
|
||||
</p>
|
||||
</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">Free account</h5>
|
||||
<p>Get family access from parents, or create your free account.</p>
|
||||
</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">Suggest or Find Task</h5>
|
||||
<p>Suggest tasks to parents or pick from the market.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">Complete Task</h5>
|
||||
<p>Complete the task as specified.</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">Reward</h5>
|
||||
<p>Get your reward as specified.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-lg-12">
|
||||
var site = getConfig()[0];
|
||||
return (
|
||||
<section className="appie-traffic-area pt-140 pb-180">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-traffic-title">
|
||||
<h3 className="title">{featuresContent.title}</h3>
|
||||
<p>{featuresContent.detail}</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
{featuresContent.list?.map(({ icon, header, paragraph }, idx) => (
|
||||
<div className="col-lg-6 col-md-6" key={idx}>
|
||||
<div className={`appie-traffic-service features item-${idx + 1} mb-30`} style={{ paddingRight: "45px" }}>
|
||||
<div className="icon">
|
||||
<i className={icon} />
|
||||
</div>
|
||||
<h5 className="title">{header}</h5>
|
||||
<p>{paragraph}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* <div className="col-lg-12">
|
||||
<div className="traffic-btn mt-50">
|
||||
<a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
Login <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="traffic-thumb ">
|
||||
<img
|
||||
className="wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="traffic-thumb ">
|
||||
<img
|
||||
className="wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TrafficHomeOne;
|
||||
|
||||
const featuresContent = {
|
||||
title: "on WrenchBoard.",
|
||||
detail: "Performing task on WrenchBoard is easy. All you need is a free account.",
|
||||
list: [
|
||||
{ icon: "fal fa-check", header: "Free account", paragraph: "Get family access from parents, or create your free account." },
|
||||
{ icon: "fal fa-check", header: "Suggest or Find Task", paragraph: "Suggest tasks to parents or pick from the market." },
|
||||
{ icon: "fal fa-check", header: "Complete Task", paragraph: "Complete the task as specified." },
|
||||
{ icon: "fal fa-check", header: "Reward", paragraph: "Get your reward as specified." },
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user