Initial Commit

components/common/ThreeImageDisplay.jsx

@@ -0,0 +1,59 @@
+"use client";
+import { testimonials } from "@/data/testimonials";
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import Image from "next/image";
+import { counterItems2 } from "@/data/facts";
+import OdometerComponent from "@/components/common/OdometerComponent";
+
+export default function ThreeImageDisplay(){
+  return(
+    <div className="section-testimonial style-5 tf-spacing-16 pb-0">
+      <Swiper
+        className="swiper"
+        loop
+        initialSlide={1}
+        centeredSlides
+        spaceBetween={15}
+        breakpoints={{
+          0: { slidesPerView: 1.2 },
+          575: {
+            slidesPerView: 1.2,
+          },
+          768: {
+            slidesPerView: 1.2,
+            spaceBetween: 20,
+          },
+          992: {
+            slidesPerView: 1.3,
+            spaceBetween: 72,
+          },
+          1200: {
+            slidesPerView: 1.98,
+            spaceBetween: 72,
+          },
+        }}
+      >
+        {testimonials.map((testimonial, index) => (
+          <SwiperSlide
+            className="swiper-slide"
+            key={`${testimonial.id}-${index}`}
+          >
+            <div className="testimonial style-4">
+              <div className="img-style mb_40">
+                <Image
+                  className="lazyload"
+                  data-src={testimonial.imageSrc}
+                  alt="testimonial"
+                  src={testimonial.imageSrc}
+                  width={908}
+                  height={652}
+                />
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+}