Веб-разработка. Разработка с нуля. Техническое задание на разработку Landing Page (React) 1. Общие сведения Тип проекта: Одностраничный сайт (Landing Page). Платформа: Веб (Desktop, Tablet, Mobile). Стек технологий: React (функциональные компоненты + хуки). Макеты: Figma (предоставляются полный доступ и все необходимые брейкпоинты). Итоговый результат: Исходный код размещен на GitHub (приватный/публичный репозиторий). 2. Структура и навигация Сайт состоит из 6 полноэкранных блоков (слайдов). Навигация: Переключение между слайдами осуществляется прокруткой колесика мыши (скроллинг по вертикали). Альтернатива: Должна быть реализована навигация через клик по пунктам меню (якоря). Поведение: При скролле страница плавно переходит к следующему/предыдущему блоку (аналогично полноэкранным слайдерам). 3. Требования к верстке Pixel Perfect: Верстка должна полностью соответствовать макетам. Допустимые отклонения — до 2px. Адаптивность: Реализовать кроссбраузерную и резиновую верстку для всех популярных разрешений (десктоп, планшет, мобильные устройства). Брейкпоинты указываются в макете. Семантичность: Использование семантических тегов HTML5. Производительность: Оптимизация загрузки ресурсов (изображения в форматах WebP/AVIF, ленивая загрузка). 4. Функциональные возможности 4.1. Анимация и эффекты Параллакс: Реализовать эффект параллакса для фоновых элементов (глубина/скорость движения зависит от положения скролла). Микро-анимации: Плавное появление контента при переходе на слайд (fade-in, slide-up и т.д.). Меню (Таймлайн): Разработать анимационное меню в виде таймлайна). Анимация меню должна реагировать на текущий активный слайд. 4.2. Интерактивные элементы Форма обратной связи: Поля: Имя, Телефон/Email, Сообщение. Валидация полей (на стороне клиента). Отправка данных на почту (реализация через бэкенд или сторонний сервис, например, EmailJS, или интеграция с API сайта). 5. Работа с данными (API) Вариант А (Динамика): Предусмотреть возможность подключения к Strapi (или аналогичной CMS) для получения контента (тексты, изображения, ссылки). Вариант Б (Статика): Если данные не будут загружаться с бэка, контент должен быть жестко задан в коде. Требование: У исполнителя должен быть опыт работы с REST API (умение делать запросы fetch/axios, обработка промисов, состояний загрузки). 6. Технические требования Сборка: Использование современного стека (Create React App, Vite или Next.js). Стили: Использование CSS-препроцессоров (SCSS) или CSS-in-JS (по согласованию). Приветствуется использование CSS-фреймворков (Tailwind — по желанию). Качество кода: Чистый, читаемый код с комментариями к сложным моментам. Контроль версий: Регулярные коммиты с понятными сообщениями. 7. Критерии приемки Верстка точно соответствует макету (Pixel Perfect). Сайт корректно отображается на всех устройствах (проверка в Chrome DevTools и на реальных устройствах). Слайдер плавно переключается по скроллу без рывков. Все анимации работают без лагов (60 FPS). Письмо с формы успешно уходит на указанный почтовый ящик. Исходный код залит на GitHub и доступен для проверки. 8. Зоны ответственности Заказчик предоставляет: полный доступ к макетам, текстовое наполнение, медиафайлы (фото/видео), доступ к API (если требуется). Исполнитель предоставляет: развернутый проект с исходным кодом, инструкцию по запуску (README), задеплоенную версию для демонстрации (например, Vercel/Netlify). 9. Дополнительные условия Все детали по анимации и меню (таймлайн) находятся на стадии обсуждения и могут быть уточнены в процессе работы.