113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
"use client";
|
|
import { serviceItems } from "@/data/services";
|
|
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
export default function Services() {
|
|
const swiperOptions = {
|
|
spaceBetween: 30,
|
|
speed: 2000,
|
|
loop: true,
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
autoplay: {
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".dot",
|
|
clickable: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".snbp1",
|
|
prevEl: ".snbn1",
|
|
},
|
|
breakpoints: {
|
|
1399: {
|
|
slidesPerView: 4,
|
|
},
|
|
1199: {
|
|
slidesPerView: 3,
|
|
},
|
|
991: {
|
|
slidesPerView: 2,
|
|
},
|
|
767: {
|
|
slidesPerView: 2,
|
|
},
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
0: {
|
|
slidesPerView: 1,
|
|
},
|
|
},
|
|
};
|
|
return (
|
|
<section
|
|
id="services"
|
|
className="service-section fix section-padding bg-cover scrollSpySection"
|
|
style={{ backgroundImage: "url(/assets/img/home/explore/explore-bg.webp)" }}
|
|
>
|
|
<div className="container">
|
|
<div className="section-title text-center">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long"></i>EXPLORE
|
|
<i className="fa-regular fa-arrow-right-long"></i>
|
|
</h6>
|
|
<h2 className="text-white splt-txt wow">
|
|
<AnimatedText text="Explore Machinery " />
|
|
<br />
|
|
<AnimatedText text="and Solutions" />
|
|
</h2>
|
|
</div>
|
|
<div className="array-button">
|
|
<button className="array-prev snbp1">
|
|
<i className="fa-regular fa-arrow-left-long"></i>
|
|
</button>
|
|
<button className="array-next snbn1">
|
|
<i className="fa-regular fa-arrow-right-long"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="container-fluid">
|
|
<Swiper {...swiperOptions} className="swiper service-slider">
|
|
{serviceItems.map((item, index) => (
|
|
<SwiperSlide className="swiper-slide" key={index}>
|
|
<div className="service-box-items">
|
|
<div className="service-thumb">
|
|
<Image src={item.imgSrc} width={346} height={236} alt="img" />
|
|
<div className="icon">
|
|
<Image
|
|
src={item.iconSrc}
|
|
width={32}
|
|
height={32}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="service-content">
|
|
<h2 className="number">{item.number}</h2>
|
|
<h3>
|
|
<Link href={`/service-details/${item.id}`}>
|
|
{item.title}
|
|
</Link>
|
|
</h3>
|
|
<p>{item.description}</p>
|
|
<Link
|
|
href={`/service-details/${item.id}`}
|
|
className="link-btn"
|
|
>
|
|
Explore More <i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|