veilix.app/design/handoff/project/uploads/Дизайн VEILIX.md

# Дизайн VEILIX


## Общая задача  
  
Нужен дизайн сайта по продаже персональных VPN. Не классический VPN провайдер, когда много клиентов на 1 сервере, а когда мы делаем каждому клиенту индивидуальный IP.  
  
Быстрый современный сайт на tailwind с максимальной скоростью под Google Page Speed. Стек который будем дальше использовать: payloadcms + Next.  
  
  
## Дизайн  
  
"Чистый" современный дизайн без лишней маркетинговых бессмысленных фраз, которые есть у всех крупных. Нам нужно выделиться, чётким предложениям видным и понятным, по делу, а не придумывать того чего нет. Прям минимум, тк нет лишней информации.  
  
Если сравнить карты Apple vs Карты Google. Apple в своих картах явно пошёл не биться в лоб с Google, тк это бессмысленно, а сделан совсем минимальный интерфейс, при том что у Google в целом, тоже понятно, но за счёт функционала интерфейс перегружен в любом случае. Этот же пример и про Apple Music.  
  
### Основные тезисы:  
  
- "Чистая" страница с минимум информации  
- Современный шрифт, не технический  
- Это сайт не для гиков, а для обычных людей. Графика, иконки, шрифты должны располагать и быть понятны человеку не компьютерному. Есть когда сайты выглядят больше как для гиков и не только по описанию и текстам, а потому какие шрифты, графика, иконки.  
- Не нужны банальные иконки всяких замков, защит и прочего  
- Ночная тема  
  
  
## Верхнее меню  
  
1. Логотип (слева)  
2. далее отдельно немного от логотипа правее  
    - Цены  
    - Локации  
    - Поддержка   
3. далее прижато справа:  
    - Переключение языков (иконка)  
    - Кнопка Login  
    - Кнопка Get VPN  
  
Название Veilix - без слова VPN для EN. Для русского Вейликс.  
  
Висит всегда на экране, стандартно.  
  
  
## Нижнее меню  
  
Меню, теже пункты что и вверху  
Дополнительно Legal страницы  
Оплата карточками  
Переключение темы 3 режима  
Переключение языка  
  
  
## Логотип  
  
Придумать логотип лёгкий, тк Veilix, от слова Вуаль - Veil, когда она легко скрывает за собой что-то, нужен и логотип такой же. Те нужно чтобы это были какие-то замки и вот это всё банальное. У Nord на лого какие-то горы, возможно что-то с севером ассоциировано.  
  
  
  
## Цвета  
  
Сайту нужен светлый, например у Nord hero экран тёмный - так не нужно. У blancvpn тоже. При этом акцентные цвета - тёмно фиолетовый, глубокий и пастельный.  
  
 У Firefox режим инкогнито когда включается там набор градиентный фиолетовых цветов.  
  
У Protonvpn в сторону Фиолетового неплохие цвета и светлое всё, нет тёмных.  
  
  
## Языки  
  
Сделать всё на 2х языках RU и EN.  
  
  
  
## Главная страница  
  
### Hero экран  
  
Ваш личный VPN с индивидуальным IP. Но не нужно его делать на весь экран по высоте, достаточно 2/3, чтобы далее контент просматривался ниже.  
  
  
### Преимущества  
  
C иконками и расшифровкой, что это значит. Нужно написать красиво, то что перечислил ниже, можно разложить даже как-то иначе. Художественно, чтобы понятно было потребителю не разбирающемуся в технологиях, и руководителям.  
  
  
1. Индивидуальный ip  
    - Работа с западными AI снижается риск блокировки по сравнению с публичными VPN  
    - Безопасность вашего трафика в любой точке мира где вы будете пользоваться   
    - Одинаковый IP на всех ваших устройствах где-бы вы не находились, не отличить. Вы всегда в одной локации с вашим IP.  
    - Любые сервисы работают стабильнее с личными IP, тк при использовании массовых часто срабатывает защита и ботов  
  
2. Тариф включает до 4-х устройств  
    - Можно приобретать дополнительные тарифы в этой или других локациях с дополнительными индивидуальными IP  
  
3. К выбранному тарифу дополнительно выделенный RU IP адрес  
    - Используется и как прямое соединение и для организации моста в обе стороны  
  
4. Два типа протоколов WireGuard (Amnezia WG) и Xray (Vless + Histeria2 + xhttp)  
    - Дополняются и обновляются  
  
5. Умная маршрутиризация трафика из Ру к Глобал  
    - К RU сайтам через RU сервер напрямую  
    - К Глобальным трафик через туннель прокидывается через локацию в вашем тарифе  
  
6. При использовании из Глобала обратная маршрутиризация  
    - К мировым сайтам прямой коннект из вашей локации  
    - К RU сайтам трафик через туннель идёт через RU сервер  
    - Для работающих с Россией  
  
7. О нас  
    - Работаем с 2022 года  
  
  
### FAQ  
  
Стандартная история, несколько вопросов с ответами раскрывающимися. Придумай для моей тематике исходя из описанного в задаче.  
  
  
  
## Страницы Цены  
  
Сразу крупно обыграть блок с ценой на первом экране, одна цена  
  
4900 - первый месяц  
2900 далее  
  
Должен быть выбор локации, и при этом какие-то локации показывают, есть несколько серверов в наличии, а какие-то показывают будет готово через 24 часа.  
  
Готово через 24 часа это даже фича, что покупатель реально видит что под него делается.  
  
Выбор локации и Купить. Переход на страницу оформления заказа.  
  
Кнопка собирать лиды, кому требуется индивидуальные условия - оставьте заявку.  
  
  
  
  
## Страница Поддержка  
  
Крупно блок с контактный email и tg, дальше в FAQ разделённый по разделам и ниже форма связи.  
  
  
  
  
## Страница Оплаты и Оформления заказа  
  
Страница оплаты заказа при нажатии на Купить.  
  
Стандартно как у Nord и Blanc, с предложением Авторизоваться по почте.  
  
  
  
  
## Личный кабинет на Вебе  
  
Максимально простой, как у Nord и Blanc. Страница и слева сайдбар. Для личного tailwind если используют, то на нём, если что-то другое применяют, то предлагай.  
  
Регистрация и авторизация только по почте по одноразовому паролю, при этом не разделять авторизацию и регистрацию.  
  
В сайбаре Главная, Купить Ключ, Список ключей и внизу Поддержка, Язык и Тема.  
  
C Иконками пункты меню.  
  
В отличии от Nord и Blanc у нас ключей может быть несколько, чтобы сразу в нужный попадать и видеть срок истечения.  
  
### Главная страница  
- Список ключей  
- Купить Ключ  
- FAQ  
  
### Страница Ключа  
  
- Дата окончания  
- Изменить Оплату (привязанную карточку)  
- Скачать 4 конфигурации для WG или отсканировать QR  
- И ключ для Happ, crypto. Копировать и плюс QR.  
  
### Страница Купить  
  
Внутри личного кабинета без перехода на сайт, весь функционал как в разделе Купить с выбором локации  
  
  
  
## Личный кабинет в Telegram  
  
Нужен дизайн для MiniApp, и чтобы это выглядело в стиле телефона, например у самого Telegram, есть нативное приложение Wallet, и там похоже на интерфейс телефона.  
  
Обыграть всё что я написал про Личный на Вебе, в парадигме MiniApp и интерфейса как у телефона.  
  
  
  
## Дополнительный вариант Дизайна  
  
Будет 2 одинаковых сайта, но на 1 будет продаваться только индивидуальные IP, на втором чтобы была возможно и Массовые тарифы купить и также индивидуальный. Всё одинаково, за исключением 2х тарифов, Базовый и Премиум. Везде нужно это обыграть, где представлены тарифы.  
  
Но нужно максимально унифицированно.  
  
Чтобы в итоге это обрабатывали одни скрипты под разными доменами будет разное видно. В тч в Личном кабинете.