From c1f4e1382707ea471fc7def1a86ec1cf21e21947 Mon Sep 17 00:00:00 2001
From: Batyr <awbatyr@gmail.com>
Date: Thu, 4 Dec 2025 14:18:17 +0500
Subject: [PATCH] style: changed design

---
 components/shared/Reviews.tsx | 106 ++++++++++++++--------------------
 1 file changed, 43 insertions(+), 63 deletions(-)

diff --git a/components/shared/Reviews.tsx b/components/shared/Reviews.tsx
index a84791f..14641cc 100644
--- a/components/shared/Reviews.tsx
+++ b/components/shared/Reviews.tsx
@@ -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>
   );