victorAnumudu
99 lines
4.0 KiB
JavaScript
99 lines
4.0 KiB
JavaScript
import React, { useState } from 'react'
|
|
import localImgLoad from '../../../../lib/localImgLoad'
|
|
|
|
import img1 from '../../../../assets/images/modern01.png'
|
|
import img2 from '../../../../assets/images/secure_data.png'
|
|
import img3 from '../../../../assets/images/modern02.png'
|
|
import img4 from '../../../../assets/images/modern03.png'
|
|
import Right from './Right'
|
|
|
|
|
|
const Main = ({gredient}) => {
|
|
|
|
const [activeImg, setActiveImg] = useState(list[0].name)
|
|
|
|
const changeActiveImg = (name) => {
|
|
setActiveImg(name)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className={`row_am ${gredient && "gredient-bg"}`} >
|
|
{gredient &&
|
|
<div className="modernui_section_bg modernui-gredient">
|
|
<img src="assets/images/section-bg.png" alt="image"/>
|
|
</div>
|
|
}
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-6">
|
|
<div className="w-100">
|
|
<div className="p-0 appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
|
<h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Reward Accomplishments</div></h3>
|
|
<p className=''>
|
|
Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards.
|
|
</p>
|
|
</div>
|
|
<div className="appie-traffic-title section_title mb-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
|
<h3 className='title text-center text-lg-left'>Assign Faster with</h3>
|
|
<h3 className='w-100 title text-center d-flex justify-content-center justify-content-lg-end flex-nowrap'>
|
|
<div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
|
|
</h3>
|
|
</div>
|
|
<div className="row">
|
|
{list?.map(({ icon, header, paragraph, name }, idx) => (
|
|
<div className="col-12 col-md-6 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
|
|
<div
|
|
className={`appie-traffic-service features appie-modern-design`}
|
|
>
|
|
<div className="icon">
|
|
<i className={icon} />
|
|
</div>
|
|
<h5 className="title">{header}</h5>
|
|
{/* <p>{paragraph}</p> */}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 mt-4 mt-lg-0">
|
|
<Right />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Main
|
|
|
|
|
|
|
|
const list = [
|
|
{
|
|
icon: 'fal fa-check',
|
|
header: 'Reward Goals Met',
|
|
paragraph: 'Set goals together and reward accomplishment',
|
|
name: 'reward-goals',
|
|
},
|
|
{
|
|
icon: 'fal fa-check',
|
|
header: 'Assign Regular Chores',
|
|
paragraph: 'Organize essential regular chores to be done',
|
|
name: 'assign-chores',
|
|
},
|
|
{
|
|
icon: 'fal fa-check',
|
|
header: 'Financial Education',
|
|
paragraph: 'Get Kids start early on money management',
|
|
name: 'financial-edu',
|
|
},
|
|
{
|
|
icon: 'fal fa-check',
|
|
header: 'Family Connect',
|
|
paragraph: 'Connect family, share accomplishments with friends',
|
|
name: 'family-connect',
|
|
},
|
|
] |