init
This commit is contained in:
austnv
+39
@@ -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
|
||||||
Vendored
+3
@@ -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
|
||||||
|
```
|
||||||
+14
@@ -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"]
|
||||||
|
}
|
||||||
Generated
+2584
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
+21
@@ -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))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user