102 lines
3.5 KiB
JavaScript
102 lines
3.5 KiB
JavaScript
"use client";
|
|
import { bannerSlides2 } from "@/data/heroSlides";
|
|
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
export default function Hero() {
|
|
return (
|
|
<div className="page-title style-4">
|
|
<div className="tf-container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="heading-title d-flex flex-wrap-lg mb_40 justify-content-between">
|
|
<div className="left">
|
|
<p className="sub text-body-1 text_primary point">
|
|
<span className="item" /> Ultimate Peace Of Mind
|
|
</p>
|
|
<div className="text_primary text-display-3 title">
|
|
Shaping{" "}
|
|
<img
|
|
className="icon animate__rollIn animate__animated"
|
|
data-wow-delay="0s"
|
|
alt="icon"
|
|
src="/images/box-icon/check-verified-01.svg"
|
|
/>{" "}
|
|
Futures <br />
|
|
With{" "}
|
|
<img
|
|
className="icon heart animate__rollIn animate__animated"
|
|
alt="icon"
|
|
src="/images/box-icon/heart-circle.svg"
|
|
/>{" "}
|
|
Insurance Solutions
|
|
</div>
|
|
</div>
|
|
<div className="right">
|
|
<p className="sub-heading text_mono-dark-9 mb_24 split-text split-lines-transform">
|
|
Maximize your coverage, minimize your worries. We're committed
|
|
to providing exceptional customer service and comprehensive
|
|
insurance solutions that exceed your expectations.
|
|
</p>
|
|
<div className="d-flex gap_10 wrap-btn flex-wrap-sm">
|
|
<Link
|
|
href={`/about`}
|
|
className="tf-btn btn-border border-1 rounded-12 height-3"
|
|
>
|
|
<span className="text-body-1 text_primary">
|
|
Book a Free Consulting
|
|
</span>
|
|
<span className="bg-effect" />
|
|
</Link>
|
|
<Link
|
|
href={`/contact-us`}
|
|
className="tf-btn rounded-12 height-3"
|
|
>
|
|
<span className="text-body-1">Find your plan</span>
|
|
<span className="bg-effect" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Swiper
|
|
className="swiper style-pagination sw-layout"
|
|
centeredSlides
|
|
spaceBetween={12}
|
|
loop
|
|
initialSlide={1}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1.2 },
|
|
575: {
|
|
slidesPerView: 1.2,
|
|
},
|
|
768: {
|
|
slidesPerView: 1.5,
|
|
},
|
|
992: {
|
|
slidesPerView: 1.67,
|
|
},
|
|
}}
|
|
>
|
|
{bannerSlides2.map((slide) => (
|
|
<SwiperSlide className="swiper-slide" key={slide.id}>
|
|
<div className="img-wrap">
|
|
<Image
|
|
className="lazyload"
|
|
data-src={`images/page-title/${slide.src}`}
|
|
alt={slide.alt}
|
|
src={`/images/page-title/${slide.src}`}
|
|
width={1142}
|
|
height={744}
|
|
/>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
}
|