123 lines
4.4 KiB
JavaScript
123 lines
4.4 KiB
JavaScript
"use client";
|
|
import { caseStudies } from "@/data/caseStudies";
|
|
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Navigation } from "swiper/modules";
|
|
export default function CaseStudies() {
|
|
return (
|
|
<div className="section sw-layout-1 tf-spacing-13 pt-0">
|
|
<div className="tf-container">
|
|
<div className="heading-section d-flex justify-content-between flex-wrap-md gap_12 align-items-end mb_88">
|
|
<div className="left">
|
|
<h2 className="heading-title split-text effect-right">
|
|
Feature Case Studies
|
|
</h2>
|
|
<p
|
|
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
|
|
data-wow-delay="0s"
|
|
>
|
|
Discover the transformative power of our solutions. Learn how
|
|
we've helped businesses of all sizes overcome challenges.
|
|
</p>
|
|
</div>
|
|
<div className="wrap-sw-button d-flex gap_16">
|
|
<div className="sw-button style-default v2 has-bg nav-prev-layout-1 snbp6">
|
|
<i className="icon-caret-left" />
|
|
</div>
|
|
<div className="sw-button style-default v2 has-bg nav-next-layout-1 snbn6">
|
|
<i className="icon-caret-right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="tf-container slider-layout-right w-xl">
|
|
<Swiper
|
|
className="swiper"
|
|
spaceBetween={15}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1 },
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
768: {
|
|
slidesPerView: 1.1,
|
|
},
|
|
992: {
|
|
slidesPerView: 1.4,
|
|
spaceBetween: 20,
|
|
},
|
|
1200: {
|
|
slidesPerView: 1.81,
|
|
spaceBetween: 24,
|
|
},
|
|
}}
|
|
modules={[Navigation]}
|
|
navigation={{
|
|
prevEl: ".snbp6",
|
|
nextEl: ".snbn6",
|
|
}}
|
|
>
|
|
{caseStudies.map((study) => (
|
|
<SwiperSlide className="swiper-slide" key={study.id}>
|
|
<div className="case-studies-item style-1 hover-image hover-border border-element h-full">
|
|
<Link
|
|
href={`/single-project/${study.id}`}
|
|
className="img-style"
|
|
>
|
|
<Image
|
|
className="lazyload"
|
|
data-src={study.imageSrc}
|
|
alt="case-studies"
|
|
src={study.imageSrc}
|
|
width={382}
|
|
height={502}
|
|
/>
|
|
</Link>
|
|
<div className="content">
|
|
<div className="top d-flex align-items-center justify-content-between mb_31">
|
|
<div className="brand">
|
|
<Image
|
|
alt="brand"
|
|
src={study.brandSrc}
|
|
width={study.brandWidth}
|
|
height={study.brandHeight}
|
|
/>
|
|
</div>
|
|
<a href="#" className="tf-btn">
|
|
<span className="icon-arrow-top-right" />
|
|
<span className="bg-effect" />
|
|
</a>
|
|
</div>
|
|
<div className="heading mb_65">
|
|
<h4 className="mb_15 title">
|
|
<Link
|
|
href={`/single-project/${study.id}`}
|
|
className="link"
|
|
>
|
|
{study.title}
|
|
</Link>
|
|
</h4>
|
|
<p className="text_mono-gray-7 text-body-2">
|
|
{study.description}
|
|
</p>
|
|
</div>
|
|
<div className="group-number">
|
|
{study.stats.map((stat, index) => (
|
|
<div className="wrap-number" key={index}>
|
|
<h3 className="number fw-5">{stat.value}</h3>
|
|
<p className="font2 text-body-1 lh-20">{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|