Верстка одностраничника

1. Общие сведенияТип сайта: Одностраничный (Landing Page).Цель: Привлечение пользователей, предоставление информации об услугах/продуктах компании, привлечение целевых действий (заявки, подписки, регистрации).Требования к дизайну: Современный, минималистичный, удобный интерфейс с акцентом на UX/UI.Целевая аудитория: Пользователи мобильных устройств, планшетов и десктопов.2. Требования к адаптивностиПоддерживаемые разрешения экрана:Мобильные устройства (320px - 767px).Планшеты (768px - 1024px).Десктопы (1025px и выше).Адаптация контента:Упрощение или скрытие второстепенного контента на маленьких экранах.Изменение расположения блоков для улучшения восприятия на разных устройствах.Оптимизация изображений для разных разрешений.3. Основные секции и их элементыШапка сайта (Header):Логотип.Меню навигации (гибкое — изменяется на «гамбургер» на маленьких экранах).Кнопка целевого действия (например, "Заказать звонок").Основной баннер:Изображение или фон, адаптирующийся под экран.Текстовый блок (заголовок и подзаголовок).Кнопка целевого действия, размещение которой должно адаптироваться на мобильных устройствах.Описание продукта/услуги:Текстовые и визуальные блоки (с текстом и иконками).Изменение расположения и размера элементов в зависимости от устройства.Отзывы/кейсы:Блоки с отзывами клиентов или кейсами.На мобильных — возможность листания блоков.Форма обратной связи:Поля ввода (имя, телефон, e-mail).Кнопка отправки.Адаптация формы для удобного заполнения на мобильных устройствах.Подвал сайта (Footer):Контактная информация, ссылки на соцсети.Сжатие блоков на мобильных устройствах.4. Требования к реализацииHTML5, CSS3, JavaScript.CSS-фреймворк: Использование CSS Grid и Flexbox для адаптивной верстки. Допускается использование Bootstrap или Tailwind CSS (если требуется).Медиа-запросы: Разработка для разных устройств, с приоритетом мобильных.Загрузка изображений: Lazy Loading, ретина-изображения для мобильных устройств.Оптимизация производительности:Минимизация количества HTTP-запросов.Сжатие и оптимизация изображений.Минимизация и сжатие CSS и JavaScript.5. ТестированиеКроссбраузерность: Chrome, Firefox, Safari, Edge.Кроссплатформенность: Тестирование на различных устройствах (мобильные, планшеты, десктопы).Тестирование адаптивности: Элементы должны корректно масштабироваться и не перекрываться.6. Сроки выполненияСроки: 1-2 дня!!.7. ДополнительноSEO-оптимизация: Основные требования к оптимизации для поисковых систем (заголовки, мета-теги, структурированные данные).Подключение аналитики: Google Analytics, Яндекс.Метрика.ТG jsscproject