victorAnumudu
265 lines
14 KiB
JavaScript
265 lines
14 KiB
JavaScript
"use client"
|
|
import React, { useState } from 'react';
|
|
//import { Link } from 'react-router-dom';
|
|
import thumb from '../assets/images/features-thumb-11.png';
|
|
import shapeSix from '../assets/images/shape/shape-6.png';
|
|
import shapeSeven from '../assets/images/shape/shape-7.png';
|
|
import shapeEight from '../assets/images/shape/shape-8.png';
|
|
import Image from 'next/image';
|
|
function SelectFeatures({ className }) {
|
|
const [tab, setTab] = useState('setting');
|
|
const handleClick = (e, value) => {
|
|
e.preventDefault();
|
|
setTab(value);
|
|
};
|
|
//appie-services-2-area appie-services-8-area pt-90 pb-55
|
|
return (
|
|
<section className={`appie-features-area pt-100 ${className}`} id="features" >
|
|
<div className="container" style={{ marginBottom: '20px' }} >
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-3">
|
|
<div className="appie-features-tabs-btn">
|
|
<div
|
|
className="nav flex-column nav-pills"
|
|
id="v-pills-tab"
|
|
role="tablist"
|
|
aria-orientation="vertical"
|
|
>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'setting')}
|
|
className={`nav-link ${tab === 'setting' ? 'active' : ''}`}
|
|
id="v-pills-home-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-home"
|
|
role="tab"
|
|
aria-controls="v-pills-home"
|
|
aria-selected="true"
|
|
>
|
|
<i className="fas fa-cog" /> Reward achievement
|
|
</a>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'report')}
|
|
className={`nav-link ${tab === 'report' ? 'active' : ''}`}
|
|
id="v-pills-profile-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-profile"
|
|
role="tab"
|
|
aria-controls="v-pills-profile"
|
|
aria-selected="false"
|
|
>
|
|
<i className="fas fa-exclamation-triangle" /> Assign tasks or chores
|
|
</a>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'notice')}
|
|
className={`nav-link ${tab === 'notice' ? 'active' : ''}`}
|
|
id="v-pills-messages-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-messages"
|
|
role="tab"
|
|
aria-controls="v-pills-messages"
|
|
aria-selected="false"
|
|
>
|
|
<i className="fas fa-bell" /> Family engagement
|
|
</a>
|
|
<a
|
|
onClick={(e) => handleClick(e, 'app')}
|
|
className={`nav-link ${tab === 'app' ? 'active' : ''}`}
|
|
id="v-pills-settings-tab"
|
|
data-toggle="pill"
|
|
href="#v-pills-settings"
|
|
role="tab"
|
|
aria-controls="v-pills-settings"
|
|
aria-selected="false"
|
|
>
|
|
<i className="fas fa-lock" /> Fund wallets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-9">
|
|
<div className="tab-content" id="v-pills-tabContent">
|
|
<div
|
|
className={`${
|
|
tab === 'setting' ? 'show active' : ''
|
|
} tab-pane fade`}
|
|
id="v-pills-home"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-home-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center wow animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<Image src={thumb} alt=""
|
|
style={{ width: '350px', height:'auto', margin: 'auto' }} />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content wow animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>
|
|
{/*Reward Achievement*/}
|
|
</span>
|
|
<h3 className="title">
|
|
Reward <br /> Achievement
|
|
</h3>
|
|
<p>
|
|
Reward with points, badges, recognition, or money rewards with easy steps
|
|
</p>
|
|
<a className="main-btn" href="/about-us">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`${tab === 'report' ? 'show active' : ''} tab-pane fade`}
|
|
id="v-pills-profile"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-profile-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<Image src={thumb} alt=""
|
|
style={{ width: '350px', height:'auto', margin: 'auto' }} />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>
|
|
{/*Reward Achievement ee*/}
|
|
</span>
|
|
<h3 className="title">
|
|
Assign <br /> tasks or chores
|
|
</h3>
|
|
<p>
|
|
Adapt to your family's needs with the flexibility of using one-time or repeated tasks or chores with the option to find any task.
|
|
</p>
|
|
<a className="main-btn" href="#">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`${tab === 'notice' ? 'show active' : ''} tab-pane fade`}
|
|
id="v-pills-messages"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-messages-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<Image src={thumb} alt=""
|
|
style={{ width: '350px', height:'auto', margin: 'auto' }} />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>
|
|
{/*Custom Reacyions 77*/}
|
|
</span>
|
|
<h3 className="title">
|
|
Family <br /> engagement
|
|
</h3>
|
|
<p>
|
|
Connect with education challenges, such as quizzes or learning tasks, and private chats, and invite others to your family.
|
|
</p>
|
|
<a className="main-btn" href="#">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`${tab === 'app' ? 'show active' : ''} tab-pane fade`}
|
|
id="v-pills-settings"
|
|
role="tabpanel"
|
|
aria-labelledby="v-pills-settings-tab"
|
|
>
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-thumb text-center animated fadeInUp"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<Image src={thumb} alt=""
|
|
style={{ width: '350px', height:'auto', margin: 'auto' }} />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div
|
|
className="appie-features-content animated fadeInRight"
|
|
data-wow-duration="2000ms"
|
|
data-wow-delay="600ms"
|
|
>
|
|
<span>
|
|
{/*Reward Achievement*/}
|
|
</span>
|
|
<h3 className="title">
|
|
Fund <br /> wallets
|
|
</h3>
|
|
<p>
|
|
Take control and feel secure by creating a virtual or physical card, allocating funds, and managing wallets for your kids. .
|
|
</p>
|
|
<a className="main-btn" href="#">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*<div className="features-shape-1">*/}
|
|
{/* <Image src={shapeSix} alt="" />*/}
|
|
{/*</div>*/}
|
|
{/*<div className="features-shape-2">*/}
|
|
{/* <Image src={shapeSeven} alt="" />*/}
|
|
{/*</div>*/}
|
|
{/*<div className="features-shape-3">*/}
|
|
{/* <Image src={shapeEight} alt="" />*/}
|
|
{/*</div>*/}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default SelectFeatures;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|