274 lines
20 KiB
JavaScript
274 lines
20 KiB
JavaScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useState } from "react"
|
|
|
|
export default function Services4() {
|
|
const [activeIndex, setActiveIndex] = useState(1)
|
|
const handleOnClick = (index) => {
|
|
setActiveIndex(index);
|
|
};
|
|
return (
|
|
<>
|
|
<section className="services__area-six services__bg-six" data-background="/assets/img/bg/h3_services_bg.jpg">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div className="section-title white-title mb-40 tg-heading-subheading animation-style3">
|
|
<span className="sub-title">WHAT WE OFFER</span>
|
|
<h2 className="title tg-element-title">
|
|
Discover Our Insurance <br /> Services For All
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="section-more-btn">
|
|
<Link href="/services" className="btn border-btn">
|
|
See More Services
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="services__tab-wrap">
|
|
<ul className="nav nav-tabs" id="myTab" role="tablist">
|
|
<li className="nav-item" onClick={() => handleOnClick(1)}>
|
|
<button className={activeIndex == 1 ? "nav-link active" : "nav-link"} id="health-tab" data-bs-toggle="tab" data-bs-target="#health-tab-pane" type="button" role="tab" aria-controls="health-tab-pane" aria-selected="true">
|
|
<i className="flaticon-healthcare" /> Health Insurance
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(2)}>
|
|
<button className={activeIndex == 2 ? "nav-link active" : "nav-link"} id="travel-tab" data-bs-toggle="tab" data-bs-target="#travel-tab-pane" type="button" role="tab" aria-controls="travel-tab-pane" aria-selected="false">
|
|
<i className="flaticon-travel-insurance" />
|
|
Travel Insurance
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(3)}>
|
|
<button className={activeIndex == 3 ? "nav-link active" : "nav-link"} id="vehicle-tab" data-bs-toggle="tab" data-bs-target="#vehicle-tab-pane" type="button" role="tab" aria-controls="vehicle-tab-pane" aria-selected="false">
|
|
<i className="flaticon-protection" />
|
|
Vehicle Insurance
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(4)}>
|
|
<button className={activeIndex == 4 ? "nav-link active" : "nav-link"} id="cargo-tab" data-bs-toggle="tab" data-bs-target="#cargo-tab-pane" type="button" role="tab" aria-controls="cargo-tab-pane" aria-selected="false">
|
|
<i className="flaticon-ship" />
|
|
Cargo Insurance
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(5)}>
|
|
<button className={activeIndex == 5 ? "nav-link active" : "nav-link"} id="fire-tab" data-bs-toggle="tab" data-bs-target="#fire-tab-pane" type="button" role="tab" aria-controls="fire-tab-pane" aria-selected="false">
|
|
<i className="flaticon-house" />
|
|
Fire Insurance
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" onClick={() => handleOnClick(6)}>
|
|
<button className={activeIndex == 6 ? "nav-link active" : "nav-link"} id="bike-tab" data-bs-toggle="tab" data-bs-target="#bike-tab-pane" type="button" role="tab" aria-controls="bike-tab-pane" aria-selected="false">
|
|
<i className="flaticon-motorbike" />
|
|
Bike Insurance
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div className="tab-content" id="myTabContent">
|
|
<div className={activeIndex == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="health-tab-pane" role="tabpanel" aria-labelledby="health-tab" tabIndex={0}>
|
|
<div className="services__item-four shine-animate-item">
|
|
<div className="services__thumb-four shine-animate">
|
|
<img src="/assets/img/services/h3_services_img01.jpg" alt="" />
|
|
</div>
|
|
<div className="services__content-four">
|
|
<h2 className="title">
|
|
<Link href="/services-details">Health Insurance</Link>
|
|
</h2>
|
|
<p>Explore our savings, quality care and wellness solutions to craft the perfect plan for your busineshen an unknown printer.</p>
|
|
<div className="about__list-box">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Business Growth
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Analysis Research
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
100% Secure
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Link href="/services-details" className="btn">
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={activeIndex == 2 ? "tab-pane fade show active" : "tab-pane fade"} id="travel-tab-pane" role="tabpanel" aria-labelledby="travel-tab" tabIndex={0}>
|
|
<div className="services__item-four shine-animate-item">
|
|
<div className="services__thumb-four shine-animate">
|
|
<img src="/assets/img/services/h3_services_img02.jpg" alt="" />
|
|
</div>
|
|
<div className="services__content-four">
|
|
<h2 className="title">
|
|
<Link href="/services-details">Health Insurance</Link>
|
|
</h2>
|
|
<p>Explore our savings, quality care and wellness solutions to craft the perfect plan for your busineshen an unknown printer.</p>
|
|
<div className="about__list-box">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Business Growth
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Analysis Research
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
100% Secure
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Link href="/services-details" className="btn">
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={activeIndex == 3 ? "tab-pane fade show active" : "tab-pane fade"} id="vehicle-tab-pane" role="tabpanel" aria-labelledby="vehicle-tab" tabIndex={0}>
|
|
<div className="services__item-four shine-animate-item">
|
|
<div className="services__thumb-four shine-animate">
|
|
<img src="/assets/img/services/h3_services_img01.jpg" alt="" />
|
|
</div>
|
|
<div className="services__content-four">
|
|
<h2 className="title">
|
|
<Link href="/services-details">Health Insurance</Link>
|
|
</h2>
|
|
<p>Explore our savings, quality care and wellness solutions to craft the perfect plan for your busineshen an unknown printer.</p>
|
|
<div className="about__list-box">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Business Growth
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Analysis Research
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
100% Secure
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Link href="/services-details" className="btn">
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={activeIndex == 4 ? "tab-pane fade show active" : "tab-pane fade"} id="cargo-tab-pane" role="tabpanel" aria-labelledby="cargo-tab" tabIndex={0}>
|
|
<div className="services__item-four shine-animate-item">
|
|
<div className="services__thumb-four shine-animate">
|
|
<img src="/assets/img/services/h3_services_img02.jpg" alt="" />
|
|
</div>
|
|
<div className="services__content-four">
|
|
<h2 className="title">
|
|
<Link href="/services-details">Health Insurance</Link>
|
|
</h2>
|
|
<p>Explore our savings, quality care and wellness solutions to craft the perfect plan for your busineshen an unknown printer.</p>
|
|
<div className="about__list-box">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Business Growth
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Analysis Research
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
100% Secure
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Link href="/services-details" className="btn">
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={activeIndex == 5 ? "tab-pane fade show active" : "tab-pane fade"} id="fire-tab-pane" role="tabpanel" aria-labelledby="fire-tab" tabIndex={0}>
|
|
<div className="services__item-four shine-animate-item">
|
|
<div className="services__thumb-four shine-animate">
|
|
<img src="/assets/img/services/h3_services_img01.jpg" alt="" />
|
|
</div>
|
|
<div className="services__content-four">
|
|
<h2 className="title">
|
|
<Link href="/services-details">Health Insurance</Link>
|
|
</h2>
|
|
<p>Explore our savings, quality care and wellness solutions to craft the perfect plan for your busineshen an unknown printer.</p>
|
|
<div className="about__list-box">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Business Growth
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Analysis Research
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
100% Secure
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Link href="/services-details" className="btn">
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={activeIndex == 6 ? "tab-pane fade show active" : "tab-pane fade"} id="bike-tab-pane" role="tabpanel" aria-labelledby="bike-tab" tabIndex={0}>
|
|
<div className="services__item-four shine-animate-item">
|
|
<div className="services__thumb-four shine-animate">
|
|
<img src="/assets/img/services/h3_services_img02.jpg" alt="" />
|
|
</div>
|
|
<div className="services__content-four">
|
|
<h2 className="title">
|
|
<Link href="/services-details">Health Insurance</Link>
|
|
</h2>
|
|
<p>Explore our savings, quality care and wellness solutions to craft the perfect plan for your busineshen an unknown printer.</p>
|
|
<div className="about__list-box">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Business Growth
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
Analysis Research
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-check" />
|
|
100% Secure
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Link href="/services-details" className="btn">
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|