victorAnumudu
131 lines
6.3 KiB
JavaScript
131 lines
6.3 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'
|
|
|
|
|
|
const Main = ({gredient}) => {
|
|
|
|
const [activeImg, setActiveImg] = useState(list[0].name)
|
|
|
|
const changeActiveImg = (name) => {
|
|
setActiveImg(name)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className={`row_am modern_ui_section ${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 align-items-center">
|
|
<div className="col-lg-6">
|
|
<div className="ui_text w-100">
|
|
<div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
|
<h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
|
|
<p className=''>
|
|
Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
|
|
</p>
|
|
</div>
|
|
<div className="row">
|
|
{list?.map(({ icon, header, paragraph, name }, idx) => (
|
|
<div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
|
|
<div
|
|
className={`appie-traffic-service features appie-modern-design`}
|
|
style={{ paddingRight: "45px" }}
|
|
>
|
|
<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">
|
|
<div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
|
|
<div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
|
|
<div className="left_img position-relative">
|
|
<img
|
|
className="moving_position_animatin position-relative"
|
|
src={ localImgLoad(`images/home/${activeImg}.jpg`)}
|
|
alt="image"
|
|
width='332px'
|
|
height='auto'
|
|
/>
|
|
</div>
|
|
<div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
|
|
<div className='d-flex flex-column justify-content-start align-items-center'>
|
|
{/* <img className="moving_position_animatin right_img_one" src={img2} alt="image" /> */}
|
|
<img
|
|
className="moving_position_animatin right_img_two"
|
|
// src={img3}
|
|
src={
|
|
activeImg == 'reward-goals' ? localImgLoad(`images/home/box-reward.png`)
|
|
:
|
|
activeImg == 'assign-chores' ? localImgLoad(`images/home/box-chores.png`)
|
|
:
|
|
activeImg == 'financial-edu' ? localImgLoad(`images/home/box-financial.png`)
|
|
:
|
|
activeImg == 'family-connect' ? localImgLoad(`images/home/box-family.png`)
|
|
:
|
|
null
|
|
}
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
<img
|
|
className="moving_position_animatin right_img_three position-relative"
|
|
src={localImgLoad(`images/home/wrench-side-logo-1.png`)}
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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',
|
|
},
|
|
] |