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() { 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
<section className="single_banner style_one"> autoplay={{ delay: 5000, disableOnInteraction: false }}
<div className="image_bg"> loop={true}
<img src="/assets/images/slider/banner-single-4-bg.png" className="img-fluid" alt="img" /> className="mySwiper"
</div> >
<div className="content_box"> {banners.map((banner) => (
<div className="large-container"> <SwiperSlide key={banner.id}>
<div className="row align-items-center"> <section className="single_banner style_one">
<div className="col-lg-5"> <div className="image_bg">
<div className="section_title type_one"> <img src={banner.bg} className="img-fluid" alt="img" />
<div className="title_whole"> </div>
<h2 className="title"> <div className="content_box">
Put your insurance <div className="large-container">
lead generation on <div className="row align-items-center">
autopilot <div className="col-lg-5">
</h2> <div className="section_title type_one">
</div> <div className="title_whole">
<p> <h2 className="title">{banner.title}</h2>
Sit amet consectetur volutpat luctus ultrices sagittis justo. Integer </div>
nibh nisi adipiscingrna eleifend nunc consecteture <p>{banner.desc}</p>
</p> </div>
</div>
<div className="newsteller_simple"> </div>
<div className="input_group"> <div className="col-lg-1" />
<form method="post"> <div className="col-lg-6">
<input type="email" name="EMAIL" placeholder="Your email address" required /> <div className="image">
<input type="submit" value="Sign up" /> <img src={banner.img} className="img-fluid" alt="img" />
</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> </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>
<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>
</div> <div className="section_title abso type_one">
</div> <div className="title_whole">
<div className="section_title abso type_one"> <h2 className="title"> #ZIPVan</h2>
<div className="title_whole"> </div>
<h2 className="title"> INSURANCE</h2> </div>
</div> </section>
</div> </SwiperSlide>
</section> ))}
</Swiper>
</> );
)
} }