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

83
components/sections/Banner1.js
View File

@ -1,11 +1,48 @@
'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() { 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 ( return (
<> <Swiper
autoplay={{ delay: 5000, disableOnInteraction: false }}
loop={true}
className="mySwiper"
>
{banners.map((banner) => (
<SwiperSlide key={banner.id}>
<section className="single_banner style_one"> <section className="single_banner style_one">
<div className="image_bg"> <div className="image_bg">
<img src="/assets/images/slider/banner-single-4-bg.png" className="img-fluid" alt="img" /> <img src={banner.bg} className="img-fluid" alt="img" />
</div> </div>
<div className="content_box"> <div className="content_box">
<div className="large-container"> <div className="large-container">
@ -13,41 +50,16 @@ export default function Banner1() {
<div className="col-lg-5"> <div className="col-lg-5">
<div className="section_title type_one"> <div className="section_title type_one">
<div className="title_whole"> <div className="title_whole">
<h2 className="title"> <h2 className="title">{banner.title}</h2>
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>
</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>
<p>{banner.desc}</p>
</div> </div>
</div> </div>
<div className="col-lg-1" /> <div className="col-lg-1" />
<div className="col-lg-6"> <div className="col-lg-6">
<div className="image"> <div className="image">
<img src="/assets/images/slider/banner-single-4-1.jpg" className="img-fluid" alt="img" /> <img src={banner.img} className="img-fluid" alt="img" />
</div> </div>
</div> </div>
</div> </div>
@ -55,11 +67,12 @@ export default function Banner1() {
</div> </div>
<div className="section_title abso type_one"> <div className="section_title abso type_one">
<div className="title_whole"> <div className="title_whole">
<h2 className="title"> INSURANCE</h2> <h2 className="title"> #ZIPVan</h2>
</div> </div>
</div> </div>
</section> </section>
</SwiperSlide>
</> ))}
) </Swiper>
);
} }