106 lines
3.6 KiB
JavaScript
106 lines
3.6 KiB
JavaScript
"use client";
|
|
import { serviceBoxes } from "@/data/services";
|
|
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Navigation, Pagination } from "swiper/modules";
|
|
export default function Services() {
|
|
return (
|
|
<div className="section-service style-2 tf-spacing-18">
|
|
<div className="tf-container-3">
|
|
<div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_62">
|
|
<div className="left">
|
|
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_15">
|
|
Service
|
|
</div>
|
|
<h3 className="split-text effect-right">
|
|
Strategic services for you to maintain <br />
|
|
sustainable growth
|
|
</h3>
|
|
</div>
|
|
<div className="right">
|
|
<Link
|
|
href={`/services`}
|
|
className="tf-btn btn-dark rounded-0 btn-px-28 height-2 mb_10"
|
|
>
|
|
<span>See our services</span>
|
|
<span className="bg-effect" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="sw-layout-1 position-relative wow animate__fadeInRight animate__animated"
|
|
data-wow-delay="0s"
|
|
>
|
|
<Swiper
|
|
className="swiper"
|
|
breakpoints={{
|
|
0: { slidesPerView: 1 },
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 16,
|
|
},
|
|
}}
|
|
spaceBetween={15}
|
|
modules={[Navigation, Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spd4",
|
|
}}
|
|
navigation={{
|
|
prevEl: ".snbp4",
|
|
nextEl: ".snbn4",
|
|
}}
|
|
>
|
|
{serviceBoxes.map((service) => (
|
|
<SwiperSlide className="swiper-slide" key={service.id}>
|
|
<div className="tf-box-icon style-2 effect-icon">
|
|
<span className="number">{service.number}</span>
|
|
<div className="content">
|
|
<div className="icon mb_16">
|
|
<Image
|
|
alt=""
|
|
src={service.iconSrc}
|
|
width={48}
|
|
height={48}
|
|
/>
|
|
</div>
|
|
<h6 className="fw-5 mb_11">
|
|
<a href="#" className="link">
|
|
{service.title}
|
|
</a>
|
|
</h6>
|
|
<p className="text-body-2 text_mono-gray-5">
|
|
{service.description}
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="text-body-1 text_primary link-black btn_link"
|
|
>
|
|
Book a call
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
<div className="sw-button style-default nav-prev-layout-1 xl-hide snbp4">
|
|
<i className="icon-arrow-left-01" />
|
|
</div>
|
|
<div className="sw-button style-default nav-next-layout-1 xl-hide snbn4">
|
|
<i className="icon-arrow-right-01" />
|
|
</div>
|
|
<div className="sw-dots style-default sw-pagination-layout-1 mt_20 justify-content-center d-flex d-xl-none spd4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|