80 lines
3.5 KiB
JavaScript
80 lines
3.5 KiB
JavaScript
"use client";
|
|
import { testimonials3 } from "@/data/testimonials";
|
|
import React from "react";
|
|
import { Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
export default function Testimonials15() {
|
|
return (
|
|
<section id="snippet-15" className="wrapper !bg-[#ffffff] ">
|
|
<div
|
|
className="wrapper image-wrapper bg-image bg-overlay !mb-14 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/bg35.jpg)" }}
|
|
>
|
|
<div className="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
|
|
<h2 className="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-4 !text-center !text-white">
|
|
Happy Customers
|
|
</h2>
|
|
<div className="swiper-container dots-closer dots-light dots-light-75">
|
|
<Swiper
|
|
className="swiper"
|
|
modules={[Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spdt15",
|
|
}}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1 },
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
},
|
|
}}
|
|
>
|
|
{testimonials3.map((elm, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<div className="item-inner">
|
|
<div className="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<div className="card-body flex-[1_1_auto] p-[40px]">
|
|
<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="!text-[0.85rem] !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 p-0">
|
|
<h5 className="!mb-0">{elm.name}</h5>
|
|
<p className="!mb-0 text-[0.8rem]">{elm.role}</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
{/* /.card-body */}
|
|
</div>
|
|
{/* /.card */}
|
|
</div>
|
|
{/* /.item-inner */}
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
{/*/.swiper-wrapper */}
|
|
</Swiper>
|
|
<div className="swiper-controls">
|
|
<div className="swiper-pagination spdt15"></div>
|
|
</div>
|
|
{/* /.swiper */}
|
|
</div>
|
|
{/* /.swiper-container */}
|
|
</div>
|
|
{/* /.container */}
|
|
</div>
|
|
{/* /.wrapper */}
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|