Этап 0: документация и макеты

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -0,0 +1,197 @@
+# Дизайн 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х тарифов, Базовый и Премиум. Везде нужно это обыграть, где представлены тарифы.  
+  
+Но нужно максимально унифицированно.  
+  
+Чтобы в итоге это обрабатывали одни скрипты под разными доменами будет разное видно. В тч в Личном кабинете.