Initial Commit

components/homes/home-1/CaseStudies.jsx

@@ -0,0 +1,122 @@
+"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>
+  );
+}