95 lines
4.6 KiB
JavaScript
95 lines
4.6 KiB
JavaScript
"use client";
|
|
|
|
import { testimonials } from "@/data/testimonials";
|
|
import Image from "next/image";
|
|
import { Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
export default function Testimonials16() {
|
|
return (
|
|
<>
|
|
<section id="snippet-16" 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="card !bg-[#edf2fc] !rounded-[0.8rem]">
|
|
<div className="card-body py-[4.5rem] xl:!px-0 lg:!px-0 px-[40px]">
|
|
<div className="flex flex-wrap mx-[-15px] !text-center">
|
|
<div className="lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%]">
|
|
<h2 className="!text-[0.8rem] uppercase !text-[#605dba] !mb-3 !leading-[1.35] !tracking-[0.02rem]">
|
|
Happy Customers
|
|
</h2>
|
|
<h3 className="xl:!text-[1.8rem] !text-[calc(1.305rem_+_0.66vw)] !leading-[1.3] font-semibold !mb-10 xxl:!px-10">
|
|
Don't take our word for it. See what customers are saying
|
|
about us.
|
|
</h3>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
|
|
<div className="lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto hidden xl:!flex lg:!flex xl:!px-[35px] lg:!px-[20px]">
|
|
<div className="img-mask mask-3">
|
|
<Image
|
|
srcSet="/assets/img/photos/about28@2x.jpg 2x"
|
|
alt="image"
|
|
src="/assets/img/photos/about28.jpg"
|
|
width="385"
|
|
height="360"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/*/column */}
|
|
<div className="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:!px-[35px] lg:!px-[20px]">
|
|
<div
|
|
className="swiper-container dots-start dots-closer !mb-6 relative z-10"
|
|
data-margin={30}
|
|
data-dots="true"
|
|
>
|
|
<Swiper
|
|
className="swiper"
|
|
spaceBetween={30}
|
|
modules={[Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spdt16",
|
|
}}
|
|
>
|
|
{testimonials.map((elm, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<span className="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3" />
|
|
<blockquote className="!pl-0 !text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0">
|
|
<p>“{elm.quote}”</p>
|
|
<div className="flex items-center text-left">
|
|
<div className="info !pl-0">
|
|
<h5 className="!mb-1 text-[.9rem] !leading-[1.5]">
|
|
{elm.name}
|
|
</h5>
|
|
<p className="!mb-0 text-[0.8rem]">
|
|
{elm.title}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</SwiperSlide>
|
|
))}
|
|
{/*/.swiper-wrapper */}
|
|
</Swiper>
|
|
<div className="swiper-controls">
|
|
<div className="swiper-pagination spdt16"></div>
|
|
</div>
|
|
{/* /.swiper */}
|
|
</div>
|
|
{/* /.swiper-container */}
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.card */}
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|