133 lines
4.6 KiB
JavaScript
133 lines
4.6 KiB
JavaScript
"use client";
|
|
import { testimonials } from "@/data/testimonials";
|
|
import { Autoplay, Navigation } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
import Image from "next/image";
|
|
export default function Testimonials() {
|
|
const swiperOptions = {
|
|
spaceBetween: 30,
|
|
speed: 2000,
|
|
loop: true,
|
|
modules: [Autoplay, Navigation],
|
|
autoplay: {
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: ".snbp2",
|
|
prevEl: ".snbn2",
|
|
},
|
|
};
|
|
return (
|
|
<section className="testimonial-section fix section-padding section-bg">
|
|
<div className="arrow-shape float-bob-y">
|
|
<Image
|
|
src="/assets/img/testimonial/arrow-shape.png"
|
|
width={202}
|
|
height={291}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="building-shape float-bob-x">
|
|
<Image
|
|
src="/assets/img/home/testimonial/testimonial-bg.webp"
|
|
width={931}
|
|
height={520}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="testimonial-image">
|
|
<Image
|
|
src="/assets/img/home/testimonial/testimonial-right.webp"
|
|
width={745}
|
|
height={708}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="container">
|
|
<div className="testimonial-wrapper">
|
|
<div className="row g-4">
|
|
<div className="col-lg-7">
|
|
<div className="testimonial-content">
|
|
<div className="section-title">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
testimonials
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="text-white splt-txt wow">
|
|
<AnimatedText text="Hear What Our Partners Say " /> <br />
|
|
<AnimatedText text="About Us!" />
|
|
</h2>
|
|
</div>
|
|
<Swiper
|
|
{...swiperOptions}
|
|
className="swiper testimonial-slider mt-3 mt-md-0"
|
|
>
|
|
{testimonials.map((text, index) => (
|
|
<SwiperSlide className="swiper-slide" key={index}>
|
|
<div className="testi-content">
|
|
<div className="icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={32}
|
|
height={32}
|
|
viewBox="0 0 32 32"
|
|
fill="none"
|
|
>
|
|
<path d="M0 4V28L12 16V4H0Z" fill="#F55B1F" />
|
|
<path d="M20 4V28L32 16V4H20Z" fill="#F55B1F" />
|
|
</svg>
|
|
<h4>{text}</h4>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
<div className="client-img-items">
|
|
<div className="client-image-area">
|
|
<div className="client-img">
|
|
<Image
|
|
src="/assets/img/home/testimonial/testimonial-1.webp"
|
|
alt="img"
|
|
width={81}
|
|
height={89}
|
|
/>
|
|
</div>
|
|
<div className="client-img">
|
|
<Image
|
|
src="/assets/img/home/testimonial/testimonial-2.webp"
|
|
alt="img"
|
|
width={81}
|
|
height={89}
|
|
/>
|
|
</div>
|
|
<div className="client-img">
|
|
<Image
|
|
src="/assets/img/home/testimonial/testimonial-3.webp"
|
|
alt="img"
|
|
width={81}
|
|
height={89}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="array-button">
|
|
<button className="array-prev snbp2">
|
|
<i className="fa-solid fa-arrow-left-long" />
|
|
</button>
|
|
<button className="array-next snbn2">
|
|
<i className="fa-solid fa-arrow-right-long" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|