first commit

components/homes/finance-consulting/Testimonials.jsx

@@ -0,0 +1,105 @@
+"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 Testimonials() {
+  return (
+    <div className="section-testimonial style-5 tf-spacing-16 pb-0">
+      <div className="heading-section text-center mb_63">
+        <h3 className="text_white split-text effect-right">
+          Our client’s journeys to success
+        </h3>
+      </div>
+      <Swiper
+        className="swiper sw-layout"
+        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 className="content">
+                <div className="left">
+                  <p className="text-body-2 text_white mb_12">
+                    {testimonial.quote}
+                  </p>
+                  <p className="text-body-3 text_mono-gray-5">
+                    {testimonial.author}
+                  </p>
+                </div>
+                <div className="logo">
+                  <Image
+                    alt="logo"
+                    src={testimonial.logoSrc}
+                    width={testimonial.logoWidth}
+                    height={testimonial.logoHeight}
+                  />
+                </div>
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <div className="bot">
+        <div className="tf-container">
+          <div className="row">
+            <div className="col-12">
+              <div className="wrap-counter styel-1">
+                {counterItems2.map((item, index) => (
+                  <div key={index} className="counter-item style-1">
+                    <div className="counter-number">
+                      <h2 className="odometer text_mono-dark-9">
+                        <OdometerComponent max={item.value} />
+                      </h2>
+                      <span className="sub text_mono-dark-9">{item.unit}</span>
+                    </div>
+                    <p
+                      className="text-body-2 text_mono-gray-7"
+                      dangerouslySetInnerHTML={{ __html: item.description }}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}