76 lines
3.5 KiB
Markdown
76 lines
3.5 KiB
Markdown
# DmitriyVPN — Лендинг сервиса
|
||
|
||
> Быстрый, стабильный и надёжный VPN для всех устройств.
|
||
|
||
🌐 **Сайт:** [dmitriyvpn.serotonin.su](https://dmitriyvpn.serotonin.su)
|
||
💬 **Telegram-канал:** [@DmitriyVPN](https://t.me/DmitriyVPN)
|
||
🛠 **Поддержка:** [@Gioramily](https://t.me/Gioramily)
|
||
|
||
---
|
||
|
||
## 📌 О проекте
|
||
|
||
Лендинг-страница для VPN-сервиса **DmitriyVPN**, полностью переработанная в соответствии с дизайн-системой **Surfshark** (`DESIGN.md`).
|
||
Дизайн выполнен в концепции светлого SaaS с контрастными тёмными панелями (ритм «dark → light → dark»), фирменным акцентом Surfshark Teal (`#1ebfbf`), конверсионными кнопками Coral Pulse (`#fa3556`) и промо-баннером Promo Gold (`#ffc200`).
|
||
|
||
---
|
||
|
||
## 🛠 Технологии и дизайн-система
|
||
|
||
- **HTML5** — семантическая разметка с чистой иерархией
|
||
- **CSS3** — полная система токенов Surfshark Design System:
|
||
- Шрифтовая система: исключительно **Inter** (веса 400, 600, 700; дисплейный трекинг -1.5px на 60px)
|
||
- Цветовая палитра: Surfshark Teal (`#1ebfbf`), Coral Pulse (`#fa3556`), Promo Gold (`#ffc200`), Charcoal Ink (`#16191c`), Tide Tint (`#e8f7f8`), Ash Gray (`#dadadd`), Deep Abyss (`#1e2327`)
|
||
- Скругления: 48px для карточек, 12px для стандартных кнопок, 64px для Hero-карточки, 96px для pill-элементов
|
||
- Плоский современный стиль без теней (elevation через контраст и 1px hairline-границы)
|
||
- **Vanilla JS** — интерактивность:
|
||
- Динамический переключатель периодов тарифов (1 мес, 3 мес со скидкой -10%, 12 мес со скидкой -20%)
|
||
- Интерактивный плавный аккордеон FAQ
|
||
- Адаптивное бургер-меню для мобильных устройств
|
||
- Плавная анимация появления контента при скролле (Scroll Reveal)
|
||
|
||
---
|
||
|
||
## 📂 Структура
|
||
|
||
```
|
||
dmitriyvpn/
|
||
├── DESIGN.md # Спецификация дизайн-системы Surfshark
|
||
├── index.html # Основная HTML-разметка страницы
|
||
├── styles.css # Таблица стилей (токены и компоненты)
|
||
├── script.js # Клиентские скрипты интерактивности
|
||
└── README.md # Документация проекта
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Запуск локально
|
||
|
||
```bash
|
||
# Открыть страницу в браузеру
|
||
start index.html
|
||
```
|
||
|
||
---
|
||
|
||
## 📋 Тарифы
|
||
|
||
| Тариф | Устройства | Цена |
|
||
|---|---|---|
|
||
| Бесплатный | 1 | 0 ₽ / навсегда |
|
||
| Standard | 1 | от 87.38 до 109.22 ₽/мес |
|
||
| Pro | 5 | от 155.53 до 194.41 ₽/мес |
|
||
| Premium | 15 | от 233.30 до 291.62 ₽/мес |
|
||
| Пробный | 1 | 0 ₽ / 3 дня |
|
||
|
||
---
|
||
|
||
## 📞 Контакты
|
||
|
||
- Telegram-канал: [@DmitriyVPN](https://t.me/DmitriyVPN)
|
||
- Техподдержка: [@Gioramily](https://t.me/Gioramily)
|
||
|
||
---
|
||
|
||
© 2026 DmitriyVPN. Все права защищены.
|