99 lines
4.0 KiB
JavaScript
99 lines
4.0 KiB
JavaScript
"use client";
|
|
import { caseStudies2 } from "@/data/caseStudies";
|
|
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
import Image from "next/image";
|
|
import { EffectFade, Navigation, Pagination } from "swiper/modules";
|
|
export default function CaseStudies() {
|
|
return (
|
|
<div className="section-case-studies style-2 tf-spacing-20">
|
|
<div className="tf-container">
|
|
<div className="heading-section text-center mb_61">
|
|
<div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_16 mx-auto">
|
|
Case Study
|
|
</div>
|
|
<h3 className="split-text effect-right">
|
|
Explore real-life examples of how our solutions have driven results
|
|
</h3>
|
|
</div>
|
|
<Swiper
|
|
className="swiper sw-single effect-content-slide"
|
|
effect="fade"
|
|
modules={[EffectFade, Navigation, Pagination]}
|
|
pagination={{
|
|
el: ".csp1",
|
|
}}
|
|
navigation={{
|
|
prevEl: ".snbpc1",
|
|
nextEl: ".snbnc1",
|
|
}}
|
|
>
|
|
{caseStudies2.map((study) => (
|
|
<SwiperSlide className="swiper-slide" key={study.id}>
|
|
<div className="case-studies-item style-2">
|
|
<div className="tf-grid-layout md-col-2">
|
|
<div className="content d-flex flex-column justify-content-between">
|
|
<div className="heading">
|
|
<p className="text-body-1 text-uppercase text_mono-gray-6 mb_20 effect-item effect-left effect-1">
|
|
{study.tags}
|
|
</p>
|
|
<h1 className="effect-item effect-left effect-2">
|
|
{study.title}
|
|
</h1>
|
|
</div>
|
|
<div className="bot">
|
|
<div className="wrap-sw-button d-flex mb_22 hide-md">
|
|
<div className="sw-button style-1 sw-single-prev snbpc1">
|
|
<i className="icon-caret-left" />
|
|
</div>
|
|
<div className="sw-button style-1 sw-single-next snbnc1">
|
|
<i className="icon-caret-right" />
|
|
</div>
|
|
</div>
|
|
<p className="text_mono-gray-6 text-body-1 mb_40">
|
|
{study.description}
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="tf-btn btn-dark height-2 btn-px-30 rounded-0"
|
|
>
|
|
<span className="">View Details</span>
|
|
<span className="bg-effect" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="right overflow-hidden position-relative">
|
|
<div className="img-style effect-img-zoom effect-item effect-right effect-3">
|
|
<Image
|
|
className="lazyload img-zoom"
|
|
data-src={study.imageSrc}
|
|
alt="case-studies"
|
|
src={study.imageSrc}
|
|
width={787}
|
|
height={826}
|
|
/>
|
|
</div>
|
|
<div className="highlight effect-item effect-right effect-4">
|
|
<h6 className="text_primary">{study.highlightText}</h6>
|
|
<div className="icon">
|
|
<Image
|
|
alt="icon"
|
|
src={study.highlightIcon}
|
|
width={study.highlightIconWidth}
|
|
height={study.highlightIconHeight}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
<div className="sw-dots style-default sw-pagination-single justify-content-center d-flex d-md-none csp1" />
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|