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