init

2026-05-24 00:34:49 +03:00
commit d13b21d5e3
24 changed files with 3074 additions and 0 deletions
@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
@@ -0,0 +1,38 @@
+# uvpn.shop
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="//sub.uvpn.shop/static/turbo.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>uVPN</title>
+    <link href="/src/assets/styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
@@ -0,0 +1,26 @@
+{
+  "name": "uvpn.shop",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.16.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "swiper": "^12.1.4",
+    "tailwindcss": "^4.3.0",
+    "vue": "^3.5.32"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.6",
+    "vite": "^8.0.8",
+    "vite-plugin-vue-devtools": "^8.1.1"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}
@@ -0,0 +1,21 @@
+<template>
+  <div class="bg-gray-950 text-white font-sans antialiased min-h-screen">
+    <AppHeader />
+    <HeroSection />
+    <FeaturesSection />
+    <PricingSection />
+    <StepsSection />
+    <TestimonialsSection />
+    <AppFooter />
+  </div>
+</template>
+
+<script setup>
+import AppHeader from './components/AppHeader.vue'
+import HeroSection from './components/HeroSection.vue'
+import FeaturesSection from './components/FeaturesSection.vue'
+import PricingSection from './components/PricingSection.vue'
+import StepsSection from './components/StepsSection.vue'
+import TestimonialsSection from './components/TestimonialsSection.vue'
+import AppFooter from './components/AppFooter.vue'
+</script>
@@ -0,0 +1 @@
+@import "tailwindcss";
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
@@ -0,0 +1,21 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import tailwindcss from '@tailwindcss/vite'
+
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})