init

2026-05-24 00:34:49 +03:00
commit d13b21d5e3
24 changed files with 3074 additions and 0 deletions
@@ -0,0 +1,125 @@
+<template>
+  <section id="testimonials" class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
+    <h2 class="text-3xl md:text-4xl font-bold text-center mb-14">
+      Отзывы пользователей
+    </h2>
+
+    <div class="relative group">
+      <Swiper
+        :modules="[Navigation, Pagination, Mousewheel]"
+        :slides-per-view="1"
+        :space-between="16"
+        :loop="true"
+        :mousewheel="{ forceToAxis: true, sensitivity: 1 }"
+        :navigation="{
+          prevEl: swiperPrev,
+          nextEl: swiperNext,
+        }"
+        :pagination="{
+          clickable: true,
+          el: swiperPagination,
+          bulletClass: 'swiper-bullet',
+          bulletActiveClass: 'swiper-bullet-active'
+        }"
+        :breakpoints="{
+          640: { slidesPerView: 2 },
+          1024: { slidesPerView: 3 }
+        }"
+        :grab-cursor="true"
+        :speed="600"
+        class="pb-10!"
+        @swiper="onSwiper"
+      >
+        <SwiperSlide v-for="(review, i) in reviews" :key="i">
+          <div class="bg-gray-900 rounded-2xl p-6 border border-gray-800 aspect-4/5 flex flex-col h-full">
+            <div class="flex items-center gap-4 mb-4">
+              <img :src="review.avatar" class="w-12 h-12 rounded-full" alt="avatar" />
+              <div>
+                <p class="font-semibold">{{ review.name }}</p>
+                <p class="text-sm text-gray-400">{{ review.username }}</p>
+              </div>
+            </div>
+            <p class="text-gray-300 italic flex-1">{{ review.text }}</p>
+          </div>
+        </SwiperSlide>
+      </Swiper>
+
+      <button
+        ref="swiperPrev"
+        class="absolute left-0 top-1/2 -translate-y-1/2 bg-gray-800/80 hover:bg-gray-700 text-white p-2 rounded-full shadow-lg backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity ml-2 z-10"
+      >
+        <ChevronLeft class="w-5 h-5" />
+      </button>
+      <button
+        ref="swiperNext"
+        class="absolute right-0 top-1/2 -translate-y-1/2 bg-gray-800/80 hover:bg-gray-700 text-white p-2 rounded-full shadow-lg backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity mr-2 z-10"
+      >
+        <ChevronRight class="w-5 h-5" />
+      </button>
+    </div>
+
+    <div ref="swiperPagination" class="flex justify-center mt-6 gap-2"></div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ChevronLeft, ChevronRight } from '@lucide/vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation, Pagination, Mousewheel } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+
+const swiperPrev = ref(null)
+const swiperNext = ref(null)
+const swiperPagination = ref(null)
+
+const reviews = [
+  {
+    avatar: '/public/images/alex.jpg',
+    name: 'Алексей',
+    username: '@austnv',
+    text: 'Скорость просто отличная, все сайты открываются мгновенно. Очень доволен сервисом!'
+  },
+  {
+    avatar: '/public/images/max.jpg',
+    name: 'Макс',
+    username: '@max_pelegrino',
+    text: 'Пользуюсь уже полгода — ни разу не подвел. Удобное приложение, все интуитивно понятно.'
+  },
+  {
+    avatar: '/public/images/dani.jpg',
+    name: 'Дани',
+    username: '@dani_sultan',
+    text: 'Лучшее решение для обхода блокировок. Подключаюсь к зарубежным серверам за секунды.'
+  },
+  {
+    avatar: '/public/images/nikita.jpg',
+    name: 'Никита',
+    username: '@nikita_novikov',
+    text: 'Очень простой интерфейс, даже мои родители разобрались. Спасибо!'
+  }
+]
+
+// Функция вызывается после инициализации Swiper
+const onSwiper = (swiper) => {
+  // Опционально: можно управлять экземпляром Swiper
+}
+</script>
+
+<style scoped>
+:deep(.swiper-bullet) {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 9999px;
+  background-color: #4b5563;
+  display: inline-block;
+  margin: 0 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+:deep(.swiper-bullet-active) {
+  background-color: #2563eb;
+}
+</style>