115 lines
6.0 KiB
JavaScript
115 lines
6.0 KiB
JavaScript
'use client'
|
|
import Link from "next/link"
|
|
import { Autoplay, Navigation, Pagination } from "swiper/modules"
|
|
import { Swiper, SwiperSlide } from "swiper/react"
|
|
|
|
const swiperOptions = {
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
slidesPerView: 1,
|
|
spaceBetween: 5,
|
|
loop: true,
|
|
breakpoints: {
|
|
'1200': {
|
|
slidesPerView: 4,
|
|
},
|
|
'992': {
|
|
slidesPerView: 3,
|
|
},
|
|
'768': {
|
|
slidesPerView: 2,
|
|
},
|
|
'576': {
|
|
slidesPerView: 2,
|
|
},
|
|
'0': {
|
|
slidesPerView: 1,
|
|
},
|
|
},
|
|
|
|
};
|
|
|
|
export default function Project4() {
|
|
return (
|
|
<>
|
|
<section className="project__area">
|
|
<div className="container-fluid p-0">
|
|
<div className="swiper-container project-active-two">
|
|
<Swiper {...swiperOptions} className="swiper-wrapper">
|
|
<SwiperSlide>
|
|
<div className="project__item-four">
|
|
<div className="project__thumb-four">
|
|
<Link href="/project-details"><img src="/assets/img/project/h5_project_img01.jpg" alt="" /></Link>
|
|
</div>
|
|
<div className="project__content-four">
|
|
<div className="left-content">
|
|
<h4 className="title"><Link href="/project-details">Marketing Idea</Link></h4>
|
|
<span>Modern Strategy</span>
|
|
</div>
|
|
<Link href="/project-details" className="right-arrow"><i className="flaticon-arrow-button" /></Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="project__item-four">
|
|
<div className="project__thumb-four">
|
|
<Link href="/project-details"><img src="/assets/img/project/h5_project_img02.jpg" alt="" /></Link>
|
|
</div>
|
|
<div className="project__content-four">
|
|
<div className="left-content">
|
|
<h4 className="title"><Link href="/project-details">Business Consulting</Link></h4>
|
|
<span>Business Strategy</span>
|
|
</div>
|
|
<Link href="/project-details" className="right-arrow"><i className="flaticon-arrow-button" /></Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="project__item-four">
|
|
<div className="project__thumb-four">
|
|
<Link href="/project-details"><img src="/assets/img/project/h5_project_img03.jpg" alt="" /></Link>
|
|
</div>
|
|
<div className="project__content-four">
|
|
<div className="left-content">
|
|
<h4 className="title"><Link href="/project-details">Digital Agency</Link></h4>
|
|
<span>Modern Strategy</span>
|
|
</div>
|
|
<Link href="/project-details" className="right-arrow"><i className="flaticon-arrow-button" /></Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="project__item-four">
|
|
<div className="project__thumb-four">
|
|
<Link href="/project-details"><img src="/assets/img/project/h5_project_img04.jpg" alt="" /></Link>
|
|
</div>
|
|
<div className="project__content-four">
|
|
<div className="left-content">
|
|
<h4 className="title"><Link href="/project-details">Inventory Tracking</Link></h4>
|
|
<span>Modern Strategy</span>
|
|
</div>
|
|
<Link href="/project-details" className="right-arrow"><i className="flaticon-arrow-button" /></Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="project__item-four">
|
|
<div className="project__thumb-four">
|
|
<Link href="/project-details"><img src="/assets/img/project/h5_project_img03.jpg" alt="" /></Link>
|
|
</div>
|
|
<div className="project__content-four">
|
|
<div className="left-content">
|
|
<h4 className="title"><Link href="/project-details">Digital Agency</Link></h4>
|
|
<span>Modern Strategy</span>
|
|
</div>
|
|
<Link href="/project-details" className="right-arrow"><i className="flaticon-arrow-button" /></Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|