init

2025-05-12 20:46:39 +03:00
commit ba30833279
43 changed files with 8562 additions and 0 deletions
--- a/src/components/Reviews.tsx
+++ b/src/components/Reviews.tsx
@@ -0,0 +1,90 @@
+import type { reviewsSchema } from '@/content.config'
+import type { z } from 'astro:content'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+import 'swiper/css/scrollbar'
+import { Mousewheel, Scrollbar } from 'swiper/modules'
+import StarIconSrc from '@/assets/icons/StarIcon.svg'
+import { useTranslations } from '@/i18n/utils'
+
+type Review = z.infer<ReturnType<typeof reviewsSchema>>
+type ReviewsProps = {
+  reviews: Review[]
+  lang?: string
+}
+
+const REVIEWS_LINK =
+  'https://yandex.ru/maps/213/moscow/?ll=37.469982%2C55.781185&mode=poi&poi%5Bpoint%5D=37.469074%2C55.781319&poi%5Buri%5D=ymapsbm1%3A%2F%2Forg%3Foid%3D19715751392%26yclid%3D10576664134676381695%26banner_id%3D1873406736351323707&tab=reviews&z=17.75'
+const swiperSlideClassName =
+  '!h-auto first:pl-0 last:pr-0 md:max-w-[600px] md:first:pl-24 md:last:pr-24'
+
+export const Reviews: React.FC<ReviewsProps> = ({ reviews, lang }) => {
+  const t = useTranslations(lang)
+
+  return (
+    <Swiper
+      modules={[Scrollbar, Mousewheel]}
+      slidesPerView={1}
+      spaceBetween={24}
+      scrollbar={{
+        hide: true,
+        draggable: true,
+      }}
+      breakpoints={{
+        768: {
+          slidesPerView: 'auto',
+        },
+      }}
+    >
+      {reviews.map((review, index) => (
+        <SwiperSlide key={index} className={swiperSlideClassName}>
+          <div className="flex h-full flex-col gap-6 bg-bg-light p-6 md:px-14 md:py-16">
+            <div className="flex gap-1">
+              {[...Array(5)].map((_, i) => (
+                <img key={i} {...StarIconSrc} alt="star" className="h-5 w-5 text-yellow-400" />
+              ))}
+            </div>
+            <blockquote className="break-words text-lg font-semibold text-text-light">
+              {review.review}
+            </blockquote>
+            <div className="mt-auto flex items-center gap-4">
+              <img
+                {...review.author.image}
+                alt={review.author.imageAlt}
+                loading="lazy"
+                className="h-16 w-16 rounded-full object-cover"
+              />
+              <div className="flex flex-col">
+                <span className="font-semibold text-text-light">{review.author.name}</span>
+                <span>{review.author.description}</span>
+              </div>
+            </div>
+          </div>
+        </SwiperSlide>
+      ))}
+      <SwiperSlide className={swiperSlideClassName}>
+        <div className="h-full bg-bg-light transition-colors hover:bg-bg-light/80">
+          <a
+            href={REVIEWS_LINK}
+            target="_blank"
+            className="flex h-full w-full flex-col items-center justify-center gap-4 p-6 text-center md:px-14 md:py-16"
+          >
+            <span className="text-xl font-semibold text-text-light">
+              {t('reviews.viewMore.title')}
+            </span>
+            <span>{t('reviews.viewMore.description')}</span>
+            <svg
+              className="mt-2 h-6 w-6 text-text-light"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M5 12h14M12 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </a>
+        </div>
+      </SwiperSlide>
+    </Swiper>
+  )
+}