add FaqSection

src/App.vue

@@ -7,6 +7,7 @@
     <PricingSection />
     <StepsSection />
     <TestimonialsSection />
+    <FaqSection />
     <AppFooter />
   </div>
 </template>
@@ -19,5 +20,6 @@ import CompatibilitySection from './components/CompatibilitySection.vue'
 import PricingSection from './components/PricingSection.vue'
 import StepsSection from './components/StepsSection.vue'
 import TestimonialsSection from './components/TestimonialsSection.vue'
+import FaqSection from './components/FaqSection.vue'
 import AppFooter from './components/AppFooter.vue'
 </script>

src/components/FaqSection.vue

@@ -0,0 +1,66 @@
+<template>
+  <section id="faq" class="px-6 py-20 md:px-12 max-w-4xl mx-auto">
+    <h2 class="text-3xl md:text-4xl font-bold text-center mb-14">
+      Часто задаваемые вопросы
+    </h2>
+
+    <div class="space-y-4">
+      <details
+        v-for="(item, index) in faqItems"
+        :key="index"
+        class="group bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors hover:border-blue-300 dark:hover:border-blue-700"
+      >
+        <summary class="flex items-center justify-between px-6 py-5 cursor-pointer list-none">
+          <span class="font-medium text-left pr-4">{{ item.question }}</span>
+          <ChevronDown
+            class="w-5 h-5 shrink-0 text-gray-400 transition-transform duration-300 group-open:rotate-180"
+          />
+        </summary>
+        <div class="px-6 pb-5 text-gray-500 dark:text-gray-400 leading-relaxed" v-html="item.answer"></div>
+      </details>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ChevronDown } from '@lucide/vue'
+
+const faqItems = [
+  {
+    question: 'Как начать пользоваться uVPN?',
+    answer: 'Откройте бота <a href="https://t.me/uVPNbot" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400">@uVPNbot</a> в Telegram, нажмите «Старт», выберите тариф или активируйте 3 дня бесплатно. Конфигурация придёт автоматически — подключение займёт 30 секунд.'
+  },
+  {
+    question: 'Нужно ли устанавливать отдельное приложение?',
+    answer: 'Нет. uVPN работает через стандартные протоколы Xray — настройка в один клик. Поддерживаются iOS, Android, Windows, macOS, Linux и Smart TV.'
+  },
+  {
+    question: 'Работает ли VPN с YouTube и Instagram?',
+    answer: 'Да. uVPN разблокирует YouTube, Instagram, Facebook, Twitter/X, LinkedIn, Twitch, Spotify и другие заблокированные в России сервисы.'
+  },
+  {
+    question: 'Какая реальная скорость соединения?',
+    answer: 'Наши серверы поддерживают до 1 Гбит/с. Для стриминга 4K достаточно 25 Мбит/с — этого у нас с запасом. Реальная скорость зависит от вашего провайдера и выбранного сервера.'
+  },
+  {
+    question: 'Есть ли гарантия возврата денег?',
+    answer: 'Да. Если uVPN вам не подойдёт по любой причине, мы вернём деньги в течение 30 дней без вопросов — просто напишите в поддержку через Telegram.'
+  },
+  {
+    question: 'Сколько устройств можно подключить одновременно?',
+    answer: 'Basic — до 1 устройства, Medium — до 2 устройств, Premium — до 10 устройств одновременно. Для семьи или небольшого офиса идеально подойдёт Premium.'
+  },
+  {
+    question: 'Хранит ли uVPN логи моей активности?',
+    answer: 'Нет. Мы придерживаемся строгой политики no-log: не сохраняем историю посещений, IP-адреса, время подключений и другие персональные данные.'
+  },
+  {
+    question: 'Как оплатить подписку?',
+    answer: 'Оплата принимается через Telegram-бот. Доступны банковские карты (Visa, Mastercard, МИР), СБП и криптовалюта. Автосписания нет — продление только по вашему желанию.'
+  },
+  {
+    question: 'Что делать, если VPN перестал работать?',
+    answer: 'Напишите в бота — мы обновим конфигурацию автоматически. В боте также есть кнопка смены сервера. Поддержка отвечает в течение нескольких минут.'
+  }
+]
+</script>