MetatroncubeSoftwareSolutions/zip-van
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Banner New sliding updated

Browse Source
This commit is contained in:
akash 2025-09-04 13:24:33 +05:30
parent 4723ae04cd
commit caebd72d2d
1 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
components/sections/Banner1.js
View File

@ -1,65 +1,78 @@
'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 (
<>
<section className="single_banner style_one">
<div className="image_bg">
<img src="/assets/images/slider/banner-single-4-bg.png" 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">
Put your insurance
lead generation on
autopilot
</h2>
</div>
<p>
Sit amet consectetur volutpat luctus ultrices sagittis justo. Integer
nibh nisi adipiscingrna eleifend nunc consecteture
</p>
</div>
<div className="newsteller_simple">
<div className="input_group">
<form method="post">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</form>
</div>
</div>
<div className="review_box d-flex align-items-center">
<div className="rimage">
<img src="/assets/images/slider/review-girls.png" className="img-fluid" alt="img" />
</div>
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> Excellent 12,534+ reviews</h2>
<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>
<p>4.8 of 5 <small><i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /></small></p>
</div>
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="image">
<img src="/assets/images/slider/banner-single-4-1.jpg" className="img-fluid" alt="img" />
</div>
</div>
</div>
</div>
</div>
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title"> INSURANCE</h2>
</div>
</div>
</section>
</>
)
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title"> #ZIPVan</h2>
</div>
</div>
</section>
</SwiperSlide>
))}
</Swiper>
);
}