uVPN/frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 6 Activity

init

Browse Source
This commit is contained in:
austnv
2026-05-24 00:34:49 +03:00
commit d13b21d5e3
24 changed files with 3074 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppFooter.vue
+18
View File
@@ -0,0 +1,18 @@
<template>
<footer id="footer" class="border-t border-gray-800 px-6 py-12 md:px-12">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-3">
<div class="flex items-center gap-3">
<img src="//sub.uvpn.shop/static/turbo.png" alt="uVPN logo" class="size-8" />
<span class="text-lg font-bold">uVPN</span>
</div>
<div class="flex gap-6 text-gray-400 text-sm">
<a href="#" class="hover:text-white transition">Политика конфиденциальности</a>
<a href="#" class="hover:text-white transition">Условия использования</a>
<a href="#" class="hover:text-white transition">Поддержка</a>
</div>
<p class="text-gray-500 text-sm">
© 2026 uVPN. Все права защищены.
</p>
</div>
</footer>
</template>
src/components/AppHeader.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<header class="flex items-center justify-between px-6 py-4 md:px-12 border-b border-gray-800 sticky top-0 bg-gray-900/80 backdrop-blur-xs z-50">
<div class="flex items-center gap-3">
<img src="//sub.uvpn.shop/static/turbo.png" alt="uVPN logo" class="size-8" />
<span class="text-xl font-bold tracking-tight">uVPN</span>
</div>
<!-- Якорные ссылки -->
<nav class="hidden md:flex items-center gap-6 text-sm text-gray-300">
<a href="#hero" @click.prevent="scrollTo('hero')" class="hover:text-white transition">Главная</a>
<a href="#features" @click.prevent="scrollTo('features')" class="hover:text-white transition">Преимущества</a>
<a href="#pricing" @click.prevent="scrollTo('pricing')" class="hover:text-white transition">Тарифы</a>
<a href="#steps" @click.prevent="scrollTo('steps')" class="hover:text-white transition">Как начать</a>
<a href="#testimonials" @click.prevent="scrollTo('testimonials')" class="hover:text-white transition">Отзывы</a>
<a href="#footer" @click.prevent="scrollTo('footer')" class="hover:text-white transition">Контакты</a>
</nav>
<button class="bg-blue-600 hover:bg-blue-700 transition px-5 py-2 rounded-lg font-medium text-sm">
Попробовать бесплатно
</button>
</header>
</template>
<script setup>
const scrollTo = (id) => {
const el = document.getElementById(id)
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}
</script>
src/components/FeaturesSection.vue
+28
View File
@@ -0,0 +1,28 @@
<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">
<div class="bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-800 transition border border-gray-800">
<Zap class="w-12 h-12 text-blue-500 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Высокая скорость</h3>
<p class="text-gray-400">Серверы в 90+ странах с пропускной способностью до 10 Гбит/с.</p>
</div>
<div class="bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-800 transition border border-gray-800">
<Shield class="w-12 h-12 text-blue-500 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Полная безопасность</h3>
<p class="text-gray-400">Шифрование AES-256 и политика отсутствия логов.</p>
</div>
<div class="bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-800 transition border border-gray-800">
<Globe class="w-12 h-12 text-blue-500 mx-auto mb-4" />
<h3 class="text-xl font-semibold mb-3">Глобальный доступ</h3>
<p class="text-gray-400">Обходите цензуру и получайте доступ к любому контенту из любой точки мира.</p>
</div>
</div>
</section>
</template>
<script setup>
import { Zap, Shield, Globe } from '@lucide/vue'
</script>
src/components/HeroSection.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<section id="hero" class="px-6 py-16 md:py-24 md:px-12 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6">
Безопасный и быстрый VPN <br /> от <span class="text-blue-500">uVPN</span>
</h1>
<p class="text-gray-400 text-lg mb-8 max-w-md">
Защитите свои данные, обходите блокировки и оставайтесь анонимными в сети с нашим современным VPN-сервисом на базе Xray.
</p>
<button class="bg-blue-600 hover:bg-blue-700 transition px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 flex items-center gap-2">
<Zap class="w-5 h-5" /> Начать бесплатно
</button>
<p class="text-gray-500 text-sm mt-4">30-дневная гарантия возврата денег</p>
</div>
<div class="flex justify-center">
<img
src="/public/images/earth.png"
alt="VPN защита"
/>
</div>
</section>
</template>
<script setup>
import { Zap } from '@lucide/vue'
</script>
src/components/PricingSection.vue
+53
View File
@@ -0,0 +1,53 @@
<template>
<section id="pricing" 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="grid md:grid-cols-3 gap-8">
<!-- Тариф Месяц -->
<div class="bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-800 hover:border-blue-600 transition">
<h3 class="text-xl font-semibold mb-2">Месяц</h3>
<p class="text-4xl font-extrabold mb-4">$11.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
<ul class="text-gray-400 space-y-3 mb-8 flex-1">
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Поддержка 24/7</li>
</ul>
<button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium">
Выбрать
</button>
</div>
<!-- Тариф Год (выделенный) -->
<div class="bg-gray-900 rounded-2xl p-8 flex flex-col border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20">
<span class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl">ПОПУЛЯРНЫЙ</span>
<h3 class="text-xl font-semibold mb-2">Год</h3>
<p class="text-4xl font-extrabold mb-4">$4.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
<ul class="text-gray-400 space-y-3 mb-8 flex-1">
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Приоритетная поддержка</li>
</ul>
<button class="w-full bg-blue-600 hover:bg-blue-700 transition py-3 rounded-xl font-bold">
Выбрать тариф
</button>
</div>
<!-- Тариф 2 года -->
<div class="bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-800 hover:border-blue-600 transition">
<h3 class="text-xl font-semibold mb-2">2 года</h3>
<p class="text-4xl font-extrabold mb-4">$2.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
<ul class="text-gray-400 space-y-3 mb-8 flex-1">
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Максимальная экономия</li>
</ul>
<button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium">
Выбрать
</button>
</div>
</div>
</section>
</template>
<script setup>
import { Check } from '@lucide/vue'
</script>
src/components/StepsSection.vue
+34
View File
@@ -0,0 +1,34 @@
<template>
<section id="steps" 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="grid md:grid-cols-3 gap-8 text-center">
<div>
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5">
<Download class="w-8 h-8" />
</div>
<h3 class="text-xl font-semibold mb-3">Скачайте приложение</h3>
<p class="text-gray-400">Доступно на Windows, macOS, Android, iOS и Linux.</p>
</div>
<div>
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5">
<CreditCard class="w-8 h-8" />
</div>
<h3 class="text-xl font-semibold mb-3">Выберите тариф</h3>
<p class="text-gray-400">Оформите подписку за пару минут.</p>
</div>
<div>
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5">
<Shield class="w-8 h-8" />
</div>
<h3 class="text-xl font-semibold mb-3">Включите защиту</h3>
<p class="text-gray-400">Нажмите «Подключиться» и пользуйтесь безопасным интернетом.</p>
</div>
</div>
</section>
</template>
<script setup>
import { Download, CreditCard, Shield } from '@lucide/vue'
</script>
src/components/TestimonialsSection.vue
+125
View File
@@ -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>