Initial Commit

components/homes/finance-consulting/CaseStudies.jsx

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