select features part
This commit is contained in:
CHIEFSOFT\ameye
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -11,6 +11,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
|
||||
import AfterHero from './AfterHero';
|
||||
import NextAfterHero from './NextAfterHero';
|
||||
import BackToTop from './BackToTop';
|
||||
import SelectFeatures from "@/app/components/SelectFeatutes";
|
||||
|
||||
|
||||
|
||||
@@ -22,8 +23,9 @@ function HomeOne() {
|
||||
<HomeNav />
|
||||
<HeroHomeOne />
|
||||
<AfterHero />
|
||||
<SelectFeatures className='pb-55-err' />
|
||||
<NextAfterHero />
|
||||
<ServicesHomeOne />
|
||||
{/*<ServicesHomeOne />*/}
|
||||
<TrafficHomeOne />
|
||||
<TrafficHomeTwo />
|
||||
<BlogHomeOne />
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
"use client"
|
||||
import React, { useState } from 'react';
|
||||
//import { Link } from 'react-router-dom';
|
||||
import thumb from '../assets/images/features-thumb-01.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">
|
||||
<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" /> Settings
|
||||
</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" /> Report
|
||||
</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" /> Saeety Notices
|
||||
</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" /> App Lock
|
||||
</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>Custom Reacyions</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</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>Custom Reacyions</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</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</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</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>Custom Reacyions</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</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;
|
||||
Reference in New Issue
Block a user