106 lines
3.3 KiB
JavaScript
106 lines
3.3 KiB
JavaScript
"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>
|
||
);
|
||
}
|