67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
"use client";
|
|
import { testimonials6 } from "@/data/testimonials";
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
import { Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
export default function Testimonials12() {
|
|
return (
|
|
<section id="snippet-12" className="wrapper !bg-[#ffffff] ">
|
|
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div className="flex flex-wrap mx-[-15px]">
|
|
<div className="md:w-10/12 lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div
|
|
className="swiper-container dots-closer !text-center !mb-6 relative z-10"
|
|
data-margin={30}
|
|
data-dots="true"
|
|
>
|
|
<Swiper
|
|
className="swiper"
|
|
spaceBetween={30}
|
|
modules={[Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spdt12",
|
|
}}
|
|
>
|
|
{testimonials6.map((elm, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<blockquote className="border-0 !text-[1rem] !leading-[1.7] !font-medium m-[0_0_1rem]">
|
|
<p>“{elm.quote}”</p>
|
|
<div className="flex items-center text-left justify-center">
|
|
<Image
|
|
className="!rounded-[50%] !w-[3.5rem]"
|
|
src={elm.imageSrc}
|
|
alt="image"
|
|
width={100}
|
|
height={100}
|
|
/>
|
|
<div className="info !pl-4">
|
|
<h5 className="!mb-1 text-[.95rem] !leading-[1.5]">
|
|
{elm.name}
|
|
</h5>
|
|
<p className="!mb-0 text-[.85rem]">{elm.role}</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
{/*/.swiper-wrapper */}
|
|
</Swiper>
|
|
<div className="swiper-controls">
|
|
<div className="swiper-pagination spdt12"></div>
|
|
</div>
|
|
{/* /.swiper */}
|
|
</div>
|
|
{/* /.swiper-container */}
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|