79 lines
3.4 KiB
JavaScript
79 lines
3.4 KiB
JavaScript
'use client';
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper";
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/navigation";
|
|
|
|
SwiperCore.use([Autoplay, Pagination, Navigation]);
|
|
|
|
export default function Banner1() {
|
|
const banners = [
|
|
{
|
|
id: 1,
|
|
bg: "/assets/images/slider/banner-single-4-bg.png",
|
|
title: "Put your insurance lead generation on autopilot",
|
|
desc: "Sit amet consectetur volutpat luctus ultrices sagittis justo. Integer nibh nisi adipiscingrna eleifend nunc consecteture",
|
|
img: "/assets/images/slider/banner-single-4-1.jpg",
|
|
},
|
|
{
|
|
id: 2,
|
|
bg: "/assets/images/slider/banner-single-4-bg.png",
|
|
title: "Grow your business with powerful automation",
|
|
desc: "Suspendisse potenti. Praesent vitae eros eget tellus tristique bibendum. Donec rutrum sed sem quis venenatis.",
|
|
img: "/assets/images/slider/banner-single-4-1.jpg",
|
|
},
|
|
{
|
|
id: 3,
|
|
bg: "/assets/images/slider/banner-single-4-bg.png",
|
|
title: "Trusted by thousands of happy customers",
|
|
desc: "Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat.",
|
|
img: "/assets/images/slider/banner-single-4-1.jpg",
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Swiper
|
|
autoplay={{ delay: 5000, disableOnInteraction: false }}
|
|
loop={true}
|
|
className="mySwiper"
|
|
>
|
|
{banners.map((banner) => (
|
|
<SwiperSlide key={banner.id}>
|
|
<section className="single_banner style_one">
|
|
<div className="image_bg">
|
|
<img src={banner.bg} className="img-fluid" alt="img" />
|
|
</div>
|
|
<div className="content_box">
|
|
<div className="large-container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-5">
|
|
<div className="section_title type_one">
|
|
<div className="title_whole">
|
|
<h2 className="title">{banner.title}</h2>
|
|
</div>
|
|
<p>{banner.desc}</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="col-lg-1" />
|
|
<div className="col-lg-6">
|
|
<div className="image">
|
|
<img src={banner.img} className="img-fluid" alt="img" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="section_title abso type_one">
|
|
<div className="title_whole">
|
|
<h2 className="title"> #ZIPVan</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
);
|
|
}
|