Нужен опытный веб‑разработчик (предпочтительно full‑stack) для реализации лендинга‑листинга ожидания (waitlist) по готовому дизайну в Figma и его запуска в продакшен.
Ссылки на макет:
Dev Mode:
Prototype:
Задача:
1) Верстка и фронтенд
- Аккуратно перенести дизайн из Figma в код, полностью сохранив текст и визуальный стиль (любые изменения текста/дизайна — только по согласованию).
- Сделать адаптивную верстку под разные устройства: десктоп, ноутбуки, планшеты, телефоны.
- Добавить базовые современные анимации и плавные появления элементов (референс по стилю:
.
2) Мультиязычность
- Реализовать переключение языков через кнопку в правом верхнем углу.
- Языки: английский (основной), испанский, французский, немецкий, итальянский, русский, арабский.
- Нужна удобная структура, чтобы я мог добавлять/редактировать тексты без разработчика (файл/панель/CMS — по вашему предложению).
3) Видео в hero‑блоке
- Подключить предоставленное видео‑демо в hero‑части, обеспечить корректное воспроизведение на всех устройствах.
- Важно: после сдачи проекта я должен легко сам менять это видео (через админку, конфиг или понятную инструкцию).
- Нужна короткая и понятная инструкция (текстом и скриншоты), как заменить видео самостоятельно.
4) Форма waitlist и backend‑часть
- Реализовать форму для сбора email‑адресов и регистрации пользователей в pre-launch лист ожидания.
- Настроить надежное сохранение данных (БД или внешний сервис по согласованию), с учетом безопасности и конфиденциальности (минимум базовые меры: валидация, защита от спама/ботов, хранение по HTTPS и т.п.).
- Нужен простой способ выгрузки списка контактов (CSV/Excel или доступ через админку).
5) Логика pop-up окон после нажатия “Join the waitlist”
После того как пользователь ввел email и нажал кнопку “Join the waitlist”:
1- Появляется первое popup‑окно:
Вопрос: “In which city would you like us to launch Safely first?”
-Пользователь начинает вводить первые буквы города.
-Под полем появляется список городов, начинающихся на эти буквы, чтобы пользователь мог выбрать из подсказок (autocomplete), без необходимости
вводить полное название.
-Базовый список городов можно взять из стандартного справочника (обсудим формат файла/БД).
2- После выбора города появляется второе popup‑окно:
Вопрос: “Any other features you would like Safely to include?”
-Пользователь может вписать свои идеи/пожелания в текстовое поле.
-Также должна быть кнопка “Skip”, чтобы пропустить этот шаг.
Все ответы (email, город, дополнительные пожелания) должны сохраняться в системе и быть связаны между собой как одна запись пользователя.
6) Публикация сайта
- Помощь с выбором и покупкой домена (если это входит в ваши услуги, укажите отдельно).
- Настройка хостинга и деплоя (желательно предложить стек и хостинг, с которым вы привыкли работать: например, Node.js/React, Next.js, Vue/Nuxt, PHP/Laravel и т.д.).
- Настройка HTTPS и базовых технических параметров для стабильной работы лендинга.
7) Технические требования (предпочтительно, но обсуждаемо)
- Чистый, понятный код, чтобы другой разработчик легко смог продолжить работу в будущем.
- Современный стек (например, Next.js / React или аналогичный), но я открыт к вашим профессиональным рекомендациям.
- Кросс-браузерная совместимость с актуальными версиями основных браузеров.
От вас в отклике:
Коротко о вашем опыте (особенно примеры лендингов с формами, waitlist, мультиязычностью).
Примеры выполненных проектов (ссылки).
Предложенный стек технологий.
Ориентировочные сроки выполнения.
Фиксированная цена за весь проект или вилка + ставка за час при доработках.
Коммуникация возможна на английском или русском, но интерфейс и основной текст лендинга — на английском.