282 lines
16 KiB
JavaScript
282 lines
16 KiB
JavaScript
|
|
import { Swiper, SwiperSlide } from "swiper/react"
|
|
import { Autoplay, Navigation, Pagination } from "swiper"
|
|
|
|
const swiperOptions = {
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
},
|
|
loop: true,
|
|
|
|
// Navigation
|
|
navigation: {
|
|
nextEl: '.owl-next',
|
|
prevEl: '.owl-prev',
|
|
},
|
|
|
|
// 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 Service4() {
|
|
return (
|
|
<>
|
|
<section className="service-section">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="section_title text-center type_two">
|
|
<h4 className="sm_title"> Vinkine Popular Services</h4>
|
|
<div className="title_whole">
|
|
<h2 className="title"> Amazing Insurance Services</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*-============spacing==========-*/}
|
|
<div className="pd_bottom_40" />
|
|
{/*-============spacing==========-*/}
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<Swiper {...swiperOptions} className="service_post style_one color_two position-relative position_four nav_true dot_true">
|
|
<SwiperSlide className="service_box type_one color_two">
|
|
<a href="service.html">
|
|
<div className="image">
|
|
<img className="img-fluid" src="assets/images/service/service-5-min.jpg" alt="Car Insurance" />
|
|
</div>
|
|
</a>
|
|
<div className="content_box">
|
|
<div className="content_inner trans">
|
|
<div className="icon trans">
|
|
<i className=" flaticon-car-insurance-1 trans" />
|
|
</div>
|
|
<div className="steps trans">5</div>
|
|
<h4 className="title_24 trans">
|
|
<a href="service.html">
|
|
Car Insurance
|
|
</a>
|
|
</h4>
|
|
<p className="trans">
|
|
Pleasant experience one has to consider the
|
|
safety factor equally well.
|
|
</p>
|
|
<a href="service.html" className="rd_more trans">
|
|
Read More
|
|
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="service_box type_one color_two">
|
|
<a href="service.html">
|
|
<div className="image">
|
|
<img className="img-fluid" src="assets/images/service/service-6-min.jpg" alt="Car Insurance" />
|
|
</div>
|
|
</a>
|
|
<div className="content_box">
|
|
<div className="content_inner trans">
|
|
<div className="icon trans">
|
|
<i className=" flaticon-marriage trans" /></div>
|
|
<div className="steps trans">6</div>
|
|
<h4 className="title_24 trans">
|
|
<a href="service.html">
|
|
Marriage insurance
|
|
</a>
|
|
</h4>
|
|
<p className="trans">
|
|
We cover you for wedding cancel, material damage
|
|
to the property</p>
|
|
<a href="service.html" className="rd_more trans">
|
|
Read More
|
|
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="service_box type_one color_two">
|
|
<a href="service.html/">
|
|
<div className="image">
|
|
<img className="img-fluid" src="assets/images/service/service-7-min.jpg" alt="Car Insurance" />
|
|
</div>
|
|
</a>
|
|
<div className="content_box">
|
|
<div className="content_inner trans">
|
|
<div className="icon trans">
|
|
<i className=" flaticon-business-trip trans" />
|
|
</div>
|
|
<div className="steps trans">7</div>
|
|
<h4 className="title_24 trans">
|
|
<a href="service.html/">
|
|
Business Insurance
|
|
</a>
|
|
</h4>
|
|
<p className="trans">
|
|
Covers the loss of income that a business
|
|
suffers after a disaster
|
|
</p>
|
|
<a href="service.html" className="rd_more trans">
|
|
Read More
|
|
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="service_box type_one color_two">
|
|
<a href="service.html">
|
|
<div className="image">
|
|
<img className="img-fluid" src="assets/images/service/service-8-min.jpg" alt="Car Insurance" />
|
|
</div>
|
|
</a>
|
|
<div className="content_box">
|
|
<div className="content_inner trans">
|
|
<div className="icon trans">
|
|
<i className=" flaticon-health-insurance trans" />
|
|
</div>
|
|
<div className="steps trans">8</div>
|
|
<h4 className="title_24 trans">
|
|
<a href="service.html">
|
|
Medical Insurance
|
|
</a>
|
|
</h4>
|
|
<p className="trans">
|
|
Additional benefits such as health check up,
|
|
wellness programs…
|
|
</p>
|
|
<a href="service.html" className="rd_more trans">
|
|
Read More
|
|
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="service_box type_one color_two">
|
|
<a href="service.html">
|
|
<div className="image">
|
|
<img className="img-fluid" src="assets/images/service/service-1-min-1.jpg" alt="Car Insurance" />
|
|
</div>
|
|
</a>
|
|
<div className="content_box">
|
|
<div className="content_inner trans">
|
|
<div className="icon trans">
|
|
<i className=" flaticon-insurance-2 trans" />
|
|
</div>
|
|
<div className="steps trans">1</div>
|
|
<h4 className="title_24 trans">
|
|
<a href="service.html">
|
|
Life insurance
|
|
</a>
|
|
</h4>
|
|
<p className="trans">
|
|
Contract between a life insurance company and a
|
|
policy owner. A life…
|
|
</p>
|
|
<a href="service.html" className="rd_more trans">
|
|
Read More
|
|
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="service_box type_one color_two">
|
|
<a href="service.html">
|
|
<div className="image">
|
|
<img className="img-fluid" src="assets/images/service/service-2-min-1.jpg" alt="Car Insurance" />
|
|
</div>
|
|
</a>
|
|
<div className="content_box">
|
|
<div className="content_inner trans">
|
|
<div className="icon trans">
|
|
<i className=" flaticon-travel-insurance trans" />
|
|
</div>
|
|
<div className="steps trans">2</div>
|
|
<h4 className="title_24 trans">
|
|
<a href="service.html">
|
|
Travel Insurance
|
|
</a>
|
|
</h4>
|
|
<p className="trans">
|
|
A travel insurance policy is a versatile plan
|
|
that offers financial compensation…
|
|
</p>
|
|
<a href="service.html" className="rd_more trans">
|
|
Read More
|
|
<svg width={14} height={12} viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 1L13 6M13 6L8 11M13 6H1" stroke="var(--color-white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
|
|
<div className="owl-nav">
|
|
<button type="button" role="presentation" className="owl-prev">
|
|
<i className="fi-rs-arrow-small-left" />
|
|
</button>
|
|
<button type="button" role="presentation" className="owl-next">
|
|
<i className="fi-rs-arrow-small-right" />
|
|
</button>
|
|
</div>
|
|
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*-============spacing==========-*/}
|
|
<div className="pd_bottom_80" />
|
|
{/*-============spacing==========-*/}
|
|
</section>
|
|
|
|
|
|
</>
|
|
)
|
|
}
|