153 lines
7.0 KiB
JavaScript
153 lines
7.0 KiB
JavaScript
import Link from "next/link"
|
||
import { Autoplay, Navigation, Pagination } from "swiper"
|
||
import { Swiper, SwiperSlide } from "swiper/react"
|
||
|
||
const swiperOptions = {
|
||
modules: [Autoplay, Pagination, Navigation],
|
||
slidesPerView: 3,
|
||
spaceBetween: 30,
|
||
autoplay: {
|
||
delay: 2500,
|
||
disableOnInteraction: false,
|
||
},
|
||
loop: true,
|
||
|
||
// Navigation
|
||
navigation: {
|
||
nextEl: '.h1n',
|
||
prevEl: '.h1p',
|
||
},
|
||
|
||
// Pagination
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
},
|
||
|
||
breakpoints: {
|
||
320: {
|
||
slidesPerView: 1,
|
||
spaceBetween: 30,
|
||
},
|
||
575: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 30,
|
||
},
|
||
767: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 30,
|
||
},
|
||
991: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 30,
|
||
},
|
||
1199: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 30,
|
||
},
|
||
1350: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 30,
|
||
},
|
||
}
|
||
}
|
||
|
||
export default function Offer1() {
|
||
return (
|
||
<>
|
||
<section className="what-we-offer bg_light_4">
|
||
{/*-============spacing==========-*/}
|
||
<div className="pd_top_90" />
|
||
{/*-============spacing==========-*/}
|
||
<div className="container">
|
||
<div className="row align-items-end">
|
||
<div className="col-lg-12 col-md-12">
|
||
<div className="section_title type_four text-center">
|
||
<h4 className="sm_title">Smooth Journey</h4>
|
||
<div className="title_whole">
|
||
<h2 className="title">How It Works</h2>
|
||
</div>
|
||
{/*-============spacing==========-*/}
|
||
<div className="pd_bottom_40" />
|
||
{/*-============spacing==========-*/}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="service_post style_two position-relative position_one nav_false dot_false">
|
||
<Swiper {...swiperOptions} className="theme_carousel ">
|
||
<SwiperSlide className="process_box type_two hover_1_get color_two">
|
||
<div className="image_box hover_1">
|
||
<img src="/assets/images/process/1.webp" alt="service" className="img-fluid" />
|
||
<div className="oh ho_1" />
|
||
<div className="oh ho_2" />
|
||
<div className="oh ho_3" />
|
||
<div className="oh ho_4" />
|
||
</div>
|
||
<div className="content">
|
||
<div className="title_22">
|
||
<h4 className="text-white">
|
||
Step 1: Don’t panic
|
||
</h4>
|
||
</div>
|
||
<p className="trans">
|
||
Found a deal on IKEA, Facebook Marketplace, or Kijiji?
|
||
Skip the stress—we’ve got wheels.
|
||
</p>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide className="process_box type_two hover_1_get color_two">
|
||
<div className="image_box hover_1">
|
||
<img src="/assets/images/process/2.png" alt="service" className="img-fluid" />
|
||
<div className="oh ho_1" />
|
||
<div className="oh ho_2" />
|
||
<div className="oh ho_3" />
|
||
<div className="oh ho_4" />
|
||
</div>
|
||
<div className="content">
|
||
<div className="title_22">
|
||
<h4 className="text-white">
|
||
Step 2: Go to zipvan.ca/book
|
||
</h4>
|
||
</div>
|
||
<p className="trans">
|
||
Enter pickup & drop-off. See your instant, final price
|
||
and pick a time—no surprises.
|
||
</p>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide className="process_box type_two hover_1_get color_two">
|
||
<div className="image_box hover_1">
|
||
<img src="/assets/images/process/3.png" alt="service" className="img-fluid" />
|
||
<div className="oh ho_1" />
|
||
<div className="oh ho_2" />
|
||
<div className="oh ho_3" />
|
||
<div className="oh ho_4" />
|
||
</div>
|
||
<div className="content">
|
||
<div className="title_22">
|
||
<h4 className="text-white">
|
||
Step 3: We handle it. You relax.
|
||
</h4>
|
||
</div>
|
||
<p className="trans">
|
||
We coordinate pickup, load with blankets & straps,
|
||
deliver to your door. Track us live; pay on delivery.
|
||
</p>
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*-============spacing==========-*/}
|
||
<div className="pd_bottom_90" />
|
||
{/*-============spacing==========-*/}
|
||
</section>
|
||
|
||
</>
|
||
)
|
||
}
|