Files
frontend/src/components/FeaturesSection.vue
T
2026-05-24 12:34:26 +03:00

49 lines
3.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<section id="features" 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">
Почему выбирают uVPN
</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Преимущество 1 -->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
<Zap class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Молниеносная скорость</h3>
<p class="text-gray-500 dark:text-gray-400">Серверы до 1 Гбит/с стримите, играйте и работайте без задержек</p>
</div>
<!-- Преимущество 2 -->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
<Shield class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Надёжное шифрование</h3>
<p class="text-gray-500 dark:text-gray-400">Современные протоколы защищают ваши данные в любой сети, включая публичный WiFi</p>
</div>
<!-- Преимущество 3 -->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
<Globe class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">30+ стран</h3>
<p class="text-gray-500 dark:text-gray-400">Серверы в Европе, Азии и Америке. Выберите локацию под нужный сервис</p>
</div>
<!-- Преимущество 4 -->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
<FileX class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Политика No-Log</h3>
<p class="text-gray-500 dark:text-gray-400">Не храним историю посещений, IP-адреса и никакие персональные данные</p>
</div>
<!-- Преимущество 5 -->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
<MessageCircle class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Управление в Telegram</h3>
<p class="text-gray-500 dark:text-gray-400">Подключение, смена сервера, продление всё через удобного бота</p>
</div>
<!-- Преимущество 6 -->
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
<RefreshCw class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Стабильная работа</h3>
<p class="text-gray-500 dark:text-gray-400">Автоматические обновления конфигураций VPN работает даже при новых блокировках</p>
</div>
</div>
</section>
</template>
<script setup>
import { Zap, Shield, Globe, FileX, MessageCircle, RefreshCw } from '@lucide/vue'
</script>