106 lines
3.3 KiB
JavaScript
106 lines
3.3 KiB
JavaScript
"use client";
|
|
import { testimonials2 } from "@/data/testimonials";
|
|
import { Autoplay, Navigation } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Image from "next/image";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
export default function Testimonials() {
|
|
const swiperOptions = {
|
|
spaceBetween: 30,
|
|
speed: 2000,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
},
|
|
modules: [Autoplay, Navigation],
|
|
navigation: {
|
|
nextEl: ".snbp4",
|
|
prevEl: ".snbn4",
|
|
},
|
|
breakpoints: {
|
|
991: {
|
|
slidesPerView: 2,
|
|
},
|
|
767: {
|
|
slidesPerView: 1,
|
|
},
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
0: {
|
|
slidesPerView: 1,
|
|
},
|
|
},
|
|
};
|
|
return (
|
|
<section className="testimonial-section-2 fix section-padding">
|
|
<div className="container">
|
|
<div className="section-title text-center">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
testimonial
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="splt-txt wow">
|
|
<AnimatedText text="What Our Client Say" />
|
|
</h2>
|
|
</div>
|
|
<div className="array-button">
|
|
<button className="array-prev snbp4">
|
|
<i className="fa-solid fa-arrow-left-long" />
|
|
</button>
|
|
<button className="array-next snbn4">
|
|
<i className="fa-solid fa-arrow-right-long" />
|
|
</button>
|
|
</div>
|
|
<Swiper {...swiperOptions} className="swiper testimonial-slider-2">
|
|
{testimonials2.map((testimonial, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<div className={`testimonial-card-items ${testimonial.style}`}>
|
|
<div className="shape-img">
|
|
<Image
|
|
src={testimonial.shapeImgSrc}
|
|
width={110}
|
|
height={107}
|
|
alt="shape"
|
|
/>
|
|
</div>
|
|
<p>{testimonial.text}</p>
|
|
<div className="client-info-items">
|
|
<div className="client-info">
|
|
<Image
|
|
src={testimonial.clientImgSrc}
|
|
width={100}
|
|
height={100}
|
|
alt="client"
|
|
/>
|
|
<div className="content">
|
|
<h4>{testimonial.clientName}</h4>
|
|
<span>{testimonial.clientRole}</span>
|
|
<div className="star">
|
|
{Array(5)
|
|
.fill(0)
|
|
.map((_, index) => (
|
|
<i className="fa-solid fa-star" key={index} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Image
|
|
src={testimonial.logoSrc}
|
|
width={95}
|
|
height={28}
|
|
style={{ height: "fit-content" }}
|
|
alt="logo"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|