114 lines
4.3 KiB
JavaScript
114 lines
4.3 KiB
JavaScript
"use client";
|
|
import { services4 } from "@/data/services";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
import { Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
export default function Services() {
|
|
return (
|
|
<div className="section-tailored-solutions tf-spacing-9">
|
|
<div className="tf-container">
|
|
<div className="heading-section mb_111">
|
|
<h2>Tailored Solutions For Your Growth</h2>
|
|
<p className="text-body-1 text_mono-gray-7 mt_20">
|
|
With custom services, we empower the development, provide support
|
|
from your unique vision.
|
|
</p>
|
|
</div>
|
|
<Swiper
|
|
className="swiper tf-sw-mobile bg_1 swiper-active-576"
|
|
data-screen={576}
|
|
spaceBetween={15}
|
|
modules={[Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spd16",
|
|
}}
|
|
>
|
|
{services4.map((service, index) => (
|
|
<SwiperSlide className="swiper-slide" key={index}>
|
|
<div className="wrap d-flex gap_7 flex-column justify-content-between h-full">
|
|
<div
|
|
className="tf-box-icon style-1 hover-border"
|
|
style={{ animationDelay: service.delay }}
|
|
>
|
|
<h5 className="mb_55 title">
|
|
<Link
|
|
href={`/service-details/${service.id}`}
|
|
className="link hover-line-text line-clamp-2"
|
|
dangerouslySetInnerHTML={{ __html: service.title }}
|
|
></Link>
|
|
</h5>
|
|
<div className="icon">
|
|
<Image
|
|
alt="icon"
|
|
src={service.imgSrc}
|
|
width={160}
|
|
height={160}
|
|
/>
|
|
</div>
|
|
<p className="text-body-1 text_mono-gray-7">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
<ul className="list d-grid gap_9">
|
|
{service.items.map((item, i) => (
|
|
<li className="text-body-1" key={i}>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
<div className="sw-dots spd16 style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
|
|
</Swiper>
|
|
<div className="swiper tf-sw-mobile swiper-inActive-576 bg_1">
|
|
<div className="swiper-wrapper tf-grid-layout-sm xl-col-4 sm-col-2 gap_24">
|
|
{services4.map((service, index) => (
|
|
<div className="swiper-slide" key={index}>
|
|
<div className="wrap d-flex gap_7 flex-column justify-content-between h-full">
|
|
<div
|
|
className="tf-box-icon style-1 hover-border"
|
|
style={{ animationDelay: service.delay }}
|
|
>
|
|
<h5 className="mb_55 title">
|
|
<Link
|
|
href={`/service-details/${service.id}`}
|
|
className="link hover-line-text line-clamp-2"
|
|
dangerouslySetInnerHTML={{ __html: service.title }}
|
|
></Link>
|
|
</h5>
|
|
<div className="icon">
|
|
<Image
|
|
alt="icon"
|
|
src={service.imgSrc}
|
|
width={160}
|
|
height={160}
|
|
/>
|
|
</div>
|
|
<p className="text-body-1 text_mono-gray-7">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
<ul className="list d-grid gap_9">
|
|
{service.items.map((item, i) => (
|
|
<li className="text-body-1" key={i}>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="sw-dots style-default sw-pagination-mb mt_20 justify-content-center d-flex d-md-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|