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/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>