166 lines
7.7 KiB
JavaScript
166 lines
7.7 KiB
JavaScript
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import { Autoplay, Pagination } from "swiper";
|
||
import "swiper/css";
|
||
import "swiper/css/pagination";
|
||
|
||
export default function Banner1() {
|
||
return (
|
||
<Swiper
|
||
modules={[Autoplay, Pagination]}
|
||
slidesPerView={1}
|
||
spaceBetween={0}
|
||
loop={true}
|
||
autoplay={{
|
||
delay: 3000,
|
||
disableOnInteraction: false,
|
||
}}
|
||
pagination={{ clickable: true }}
|
||
className="banner-swiper"
|
||
>
|
||
{/* Banner 1 */}
|
||
<SwiperSlide>
|
||
<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">Need it Moved Today?</h2>
|
||
<h2
|
||
className="title"
|
||
style={{ color: "#ff6600" }}
|
||
>
|
||
Done!
|
||
</h2>
|
||
</div>
|
||
<h3>
|
||
Same day pick & delivery across <br />southern Ontario!
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-1" />
|
||
<div className="col-lg-6">
|
||
<div className="image">
|
||
<img
|
||
src="/assets/images/home/banner/home-banner-1.webp"
|
||
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>
|
||
|
||
{/* Banner 2 */}
|
||
<SwiperSlide>
|
||
<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">Packing Worries?</h2>
|
||
<h2 className="title" style={{ color: "#ff6600" }}>
|
||
Gone!
|
||
</h2>
|
||
</div>
|
||
<h3>
|
||
Professional packing and careful handling <br />so your items arrive safe & sound.
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-1" />
|
||
<div className="col-lg-6">
|
||
<div className="image">
|
||
<img
|
||
src="/assets/images/home/banner/home-banner-2.webp"
|
||
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>
|
||
|
||
{/* Banner 3 */}
|
||
<SwiperSlide>
|
||
<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">Worried About Cost?</h2>
|
||
<h2 className="title" style={{ color: "#ff6600" }}>
|
||
Don’t Be!
|
||
</h2>
|
||
</div>
|
||
<h3>
|
||
Transparent pricing, no hidden fees, <br />and flexible options for every move.
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-1" />
|
||
<div className="col-lg-6">
|
||
<div className="image">
|
||
<img
|
||
src="/assets/images/home/banner/home-banner-3.webp"
|
||
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>
|
||
);
|
||
}
|