added new section
This commit is contained in:
victorAnumudu
@@ -28,31 +28,7 @@ function ServicesHomeOne({ className }) {
|
||||
<section
|
||||
className={`appie-service-area pt-50 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">
|
||||
Set Chores, Set Goals and <br /> Rewards Accomplishments
|
||||
</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> */}
|
||||
|
||||
>
|
||||
<Main />
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -5,6 +5,7 @@ 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}) => {
|
||||
@@ -17,16 +18,16 @@ const Main = ({gredient}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
|
||||
<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 align-items-center">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="ui_text w-100">
|
||||
<div className="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=''>
|
||||
@@ -38,7 +39,6 @@ const Main = ({gredient}) => {
|
||||
<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} />
|
||||
@@ -52,7 +52,7 @@ const Main = ({gredient}) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
|
||||
{/* <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
|
||||
@@ -65,10 +65,8 @@ const Main = ({gredient}) => {
|
||||
</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`)
|
||||
:
|
||||
@@ -90,7 +88,8 @@ const Main = ({gredient}) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<Right />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function Right() {
|
||||
return (
|
||||
<div className="w-100">
|
||||
<div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
||||
<h3 className='title text-center'>Assign Faster with</h3>
|
||||
<h3 className='title text-center d-flex justify-content-center flex-nowrap'>
|
||||
<div className='color-blue'>Wrench</div><div className='color-purple'>Agent</div>
|
||||
</h3>
|
||||
</div>
|
||||
<div className='p-2 w-100 bg-white my-2'>
|
||||
<div className='color-purple text-center'>
|
||||
<h3 className='color-purple font-25 mb-10'>Ask our "WrenchAgent" Generative AI to assist</h3>
|
||||
<h3 className='color-purple font-20 mb-10'>Recommend 4 summer chores for a 12 years old</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 bg-white custom-w-90 mx-auto border-thin border-r-10 border-purple">
|
||||
{list?.map((item, idx) => (
|
||||
<div className="col-12 mb-20" key={idx}>
|
||||
<div
|
||||
className={`appie-traffic-service-two features appie-modern-design`}
|
||||
>
|
||||
<div className="icon">
|
||||
<i className='fal fa-check' />
|
||||
</div>
|
||||
<h5 className="title italic color-purple">{item}</h5>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className='w-100 d-flex justify-content-end'>
|
||||
<button className='btn btn-get-started px-1 py-2 border-r-5 border-purple border-normal color-purple'>Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const list = [
|
||||
'Watering the plants and garden',
|
||||
'Helping with meal preparation and cooking',
|
||||
'Assisting with organizing and cleaning out a specific area of the house',
|
||||
'Taking care of a pet, such as feeding, walking, and grooming'
|
||||
]
|
||||
Reference in New Issue
Block a user