68 lines
2.9 KiB
JavaScript
68 lines
2.9 KiB
JavaScript
"use client";
|
|
import { testimonials } from "@/data/testimonials";
|
|
import React from "react";
|
|
import { Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
export default function Testimonials14() {
|
|
return (
|
|
<section id="snippet-14" className="wrapper !bg-[#ffffff]">
|
|
<div
|
|
className="wrapper image-wrapper bg-image bg-overlay !text-white !mb-[3.5rem] xl:!mb-[4.5rem] lg:!mb-[4.5rem] md:!mb-[4.5rem] bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]"
|
|
style={{ backgroundImage: "url(/assets/img/photos/bg32.jpg)" }}
|
|
>
|
|
<div className="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24 !text-center">
|
|
<i className="icn-flower !text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] opacity-50 before:content-['\e907'] font-CustomFont" />
|
|
<div className="flex flex-wrap mx-[-15px] !mt-3">
|
|
<div className="xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div
|
|
className="swiper-container dots-light dots-closer !mb-6 relative z-10"
|
|
data-margin={30}
|
|
data-dots="true"
|
|
>
|
|
<Swiper
|
|
className="swiper"
|
|
spaceBetween={30}
|
|
modules={[Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spdt14",
|
|
}}
|
|
>
|
|
{testimonials.map((elm, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<blockquote className="border-0 !text-[1.2rem] !mb-0 m-[0_0_1rem] !leading-[1.7] font-medium">
|
|
<p>“{elm.quote}”</p>
|
|
<div className="flex items-center text-left justify-center">
|
|
<div className="info p-0">
|
|
<h6 className="!mb-0 !text-white !text-[.85rem] !leading-[1.55] !tracking-[normal] font-semibold">
|
|
{elm.name}
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
{/*/.swiper-wrapper */}
|
|
</Swiper>
|
|
<div className="swiper-controls">
|
|
<div className="swiper-pagination spdt14"></div>
|
|
</div>
|
|
{/*/.swiper */}
|
|
</div>
|
|
{/* /.swiper-container */}
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
</div>
|
|
{/* /section */}
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|