style: changed design
This commit is contained in:
Batyr
parent
ad98db48fb
commit
c1f4e13827
|
|
@ -10,6 +10,7 @@ import { ReviewsType } from "@/lib/types/Reviews.type";
|
|||
import { useAppSelector } from "@/redux/hooks";
|
||||
import { selectHeader } from "@/redux/slices/headerSlice";
|
||||
import { Title } from "../ui/title";
|
||||
import Image from "next/image";
|
||||
|
||||
export const Reviews = () => {
|
||||
const { data } = useFetch<ReviewsType>("reviews");
|
||||
|
|
@ -21,16 +22,18 @@ export const Reviews = () => {
|
|||
const title = localization === "en" ? "Feedback" : "Обратная связь";
|
||||
|
||||
return (
|
||||
<section className="container my-20">
|
||||
<section className="container my-20 pb-20 overflow-hidden">
|
||||
<Title text={title} className="!text-center mb-10" />
|
||||
|
||||
<div className="max-w-[710px] mx-auto">
|
||||
<div className="max-w-[1200px] mx-auto px-4 md:px-0">
|
||||
<Swiper
|
||||
modules={[Autoplay, Pagination]}
|
||||
autoplay={{
|
||||
delay: 6000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
// autoplay={{
|
||||
// delay: 6000,
|
||||
// disableOnInteraction: false,
|
||||
// }}
|
||||
style={{ overflow: "visible" }}
|
||||
freeMode
|
||||
speed={1000}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
|
|
@ -39,76 +42,53 @@ export const Reviews = () => {
|
|||
"dot transition-all duration-300 bg-gray-300 rounded-full w-3 h-3 mx-1",
|
||||
bulletActiveClass: "dot-active !bg-PRIMARY scale-125",
|
||||
}}
|
||||
spaceBetween={50}
|
||||
slidesPerView={1}
|
||||
spaceBetween={24}
|
||||
slidesPerView={3}
|
||||
slidesPerGroup={3}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1, slidesPerGroup: 1, spaceBetween: 16 },
|
||||
768: { slidesPerView: 2, slidesPerGroup: 2, spaceBetween: 20 },
|
||||
1024: { slidesPerView: 3, slidesPerGroup: 3, spaceBetween: 24 },
|
||||
}}
|
||||
className="testimonials-swiper"
|
||||
>
|
||||
{data?.data?.map((item, i) => (
|
||||
<SwiperSlide key={item?.id ?? i}>
|
||||
<article className="relative flex flex-col text-center gap-3 justify-center items-center min-h-[300px]">
|
||||
{/* Левая кавычка */}
|
||||
<div className="md:block hidden">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#059784"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="absolute left-0 rotate-180 md:bottom-32 bottom-60"
|
||||
>
|
||||
<path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
|
||||
<path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
|
||||
</svg>
|
||||
<SwiperSlide
|
||||
key={item?.id ?? i}
|
||||
className="flex-[0_0_auto] min-h-[300px] pb-10 h-full flex items-stretch relative"
|
||||
>
|
||||
<article className="bg-white p-10 size-full rounded-[38px] flex flex-col gap-5 h-full flex-1">
|
||||
<Image
|
||||
src="/assets/icons/quotes.svg"
|
||||
alt=""
|
||||
height={35}
|
||||
width={35}
|
||||
/>
|
||||
|
||||
{/* Правая кавычка */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#059784"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="absolute right-0 bottom-2"
|
||||
>
|
||||
<path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
|
||||
<path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-sm text-[#171C1B]">{item?.text}</p>
|
||||
|
||||
<div className="size-[100px]">
|
||||
{item?.image?.path && (
|
||||
<img
|
||||
src={item.image.path}
|
||||
alt={item.name}
|
||||
className="size-[100px] object-contain bg-white rounded-full border border-gray-200"
|
||||
<div className="flex flex-col gap-5 items-center absolute left-1/2 -translate-x-1/2 -bottom-20">
|
||||
<div className="flex justify-center items-center overflow-hidden rounded-full border-4 border-PRIMARY size-[70px]">
|
||||
<Image
|
||||
src={item?.image?.path ?? ""}
|
||||
alt={item?.name}
|
||||
height={50}
|
||||
width={50}
|
||||
className="obejct-contain"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-center flex flex-col gap-1.5">
|
||||
<h3 className="text-base font-bold">{item?.name}</h3>
|
||||
<p className="text-sm">{item?.job_title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-base">{item.name}</h3>
|
||||
<h4 className="text-base text-text-secondary">
|
||||
{item.job_title}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<p className="text-base text-text-secondary md:px-14">
|
||||
{item.text}
|
||||
</p>
|
||||
</article>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* Кастомная пагинация */}
|
||||
<div className="custom-pagination flex justify-center items-center mt-10"></div>
|
||||
<div className="custom-pagination flex justify-center items-center mt-32"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue