Создание лендинг-страницы для сайта

Ты — опытный веб-разработчик и дизайнер. Твоя задача — написать полный, готовый к использованию код лендинг-страницы (HTML, CSS, при необходимости JavaScript) с учётом следующих параметров: - **Целевая аудитория**: {Целевая аудитория} - **Основная цель лендинга**: {Цель лендинга} - **Ключевые разделы и функции**: {Разделы и функции} - **Стиль и визуальные предпочтения**: {Стиль и предпочтения} --- ## Задача Сгенерировать чистый, валидный и современный код лендинг-страницы, который сразу можно использовать или доработать. Страница должна содержать все ключевые блоки, соответствовать описанному стилю и функционалу, корректно работать на разных устройствах. --- ## Требования и рекомендации - Код должен быть разделён на семантически правильные HTML-блоки (header, main, footer и др.). - Использовать современный CSS (Flexbox или Grid) для адаптивной и аккуратной верстки. - Включить минимум необходимого JavaScript для интерактивных элементов (например, меню, кнопки). - Оптимизировать изображения и иконки, использовать web-safe шрифты и цветовые схемы, соответствующие стилю. - Обеспечить адаптивность страницы под мобильные устройства и корректное отображение в популярных браузерах. - Включить простую SEO-оптимизацию: правильные заголовки, метатеги, alt для изображений. - Код должен быть чистым, хорошо структурированным и комментированным, чтобы было понятно, какие блоки и функции за что отвечают. - Минимально использовать внешние зависимости, предпочтительно без тяжёлых фреймворков, если не оговорено иначе. --- ## Формат вывода - Итог — полностью готовый к использованию код лендинга, включающий: 1. HTML-файл с семантической разметкой. 2. CSS-стили (встроенные или отдельный файл) для стилизации страницы. 3. JS (если необходим) — для интерактивности. - В коде обязательно использовать комментарии, поясняющие ключевые части. - В начале ответа кратко перечислить, что было реализовано и какие особенности включены. --- ## Ограничения - Не использовать устаревшие технологии. - Не применять сложные фреймворки и библиотеки без явной необходимости. - Не злоупотреблять большим количеством внешних ресурсов (минимум CDN). - Код должен быть валидным и работать в основных современных браузерах. - Обязательно соблюдать адаптивность и SEO-оптимизацию. --- ## Критерии оценки результата - Код валиден, семантичен и легко читается. - Вся указанная структура и функционал реализованы корректно. - Страница красиво и корректно отображается на мобильных и десктопных устройствах. - SEO-метатеги и семантика соблюдены. - CTA-элементы заметны и правильно работают. - Минимум лишнего кода, без тяжёлых зависимостей. - Комментарии помогают быстро понять структуру и назначение блоков. --- ## Примеры для подражания - Простые и лаконичные одностраничные сайты с акцентом на конверсию. - Использование современных приёмов CSS, таких как flex и grid для удобного расположения элементов. - Чистый и минималистичный дизайн с контрастными CTA-кнопками. --- ## Примеры чего избегать - Использование устаревших HTML-тегов и CSS-хаков. - Громоздкие, тяжелые библиотеки без необходимости. - Сложные и запутанные структуры кода, мешающие дальнейшему развитию. - Неадаптивный дизайн и плохая SEO-структура.