first commit

components/homes/finance-advisor/CaseStudies.jsx

@@ -0,0 +1,82 @@
+"use client";
+import { caseStudies3 } 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-case-studies sw-layout-1 tf-spacing-28">
+      <div className="tf-container-2">
+        <div className="row">
+          <div className="col-12">
+            <div className="heading-section d-flex justify-content-between mb_59">
+              <h2 className="fw-6 split-text effect-right">
+                Explore how we’ve helped people
+              </h2>
+              <div className="wrap-sw-button d-flex gap_16">
+                <div className="sw-button style-default has-bg nav-prev-layout-1 snbp1">
+                  <i className="icon-caret-left" />
+                </div>
+                <div className="sw-button style-default has-bg nav-next-layout-1 snbn1">
+                  <i className="icon-caret-right" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="tf-container-2 slider-layout-right wow animate__fadeInLeft animate__animated"
+        data-wow-delay="0s"
+      >
+        <Swiper
+          className="swiper"
+          spaceBetween={15}
+          breakpoints={{
+            0: { slidesPerView: 1.3 },
+            575: {
+              slidesPerView: 1.3,
+            },
+            768: {
+              slidesPerView: 2.5,
+              spaceBetween: 20,
+            },
+            992: {
+              slidesPerView: 4.73,
+              spaceBetween: 48,
+            },
+          }}
+          modules={[Navigation]}
+          navigation={{
+            prevEl: ".snbp1",
+            nextEl: ".snbn1",
+          }}
+        >
+          {caseStudies3.map((study) => (
+            <SwiperSlide className="swiper-slide" key={study.id}>
+              <div className="case-studies-item style-3 hover-image">
+                <div className="img-style">
+                  <Image
+                    className="lazyload"
+                    data-src={study.imageSrc}
+                    alt={study.title}
+                    src={study.imageSrc}
+                    width={study.width}
+                    height={study.height}
+                  />
+                </div>
+                <h6 className="title text_white">
+                  <Link href={`/single-project/${study.id}`} className="link">
+                    {study.title}
+                  </Link>
+                </h6>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+}