Техническое задание на верстку главной страницы

1. Общие требования

Выполнить адаптивную и Pixel Perfect верстку главной страницы в формате HTML. Проект работает на системе управления контентом версии 3.0.3.7. Необходимо строго соблюдать макеты из Figma для трех ключевых разрешений: десктоп (1420 пикселей), планшет (560 пикселей) и мобильная версия (360 пикселей). Верстка должна корректно перестраиваться на всех промежуточных разрешениях.

2. Макеты и адаптив

Дизайн-макеты доступны по ссылке в Figma, где указаны все состояния страницы (главная).
Соблюдать адаптивность между указанными брейкпоинтами.
Обеспечить высокую скорость загрузки.
Запрещено генерировать код динамически на JavaScript или использовать решения, созданные нейросетью, если они влияют на производительность или ломают существующие штатные элементы.

3. Аналитика и события

Идентификаторы для десктопной версии:

act: click_main_banner (клик по главному баннеру)
act: click_button_quize (клик по кнопке квиза)
act: click_link_detskie_ploshadki (для каждой ссылки промо каталога)
act: click_button_add_cart (клик по кнопке корзины)
act: click_button_catalog (клик по кнопке каталога)
act: click_submit_request (клик по кнопке «оставить заявку»)
lead: success_submit_request (успешная отправка формы «оставить заявку»)
act: click_telephone (клик по телефону)
act: click_view_reviews (клик на «смотреть обзоры»)
act: click_button_submit_select_dip (клик кнопка «подобрать площадку»)
lead: success_submit_dip (успешная отправка формы «подобрать площадку»)
act: click_view_for_company (клик по кнопке «о компании»)

Дополнительные идентификаторы для адаптивных версий:

Все идентификаторы из десктопной версии.
act: click_mobile_menu (открытие/закрытие мобильного меню)
act: click_stories (для четырех элементов «историй» 1,2,3,4)

4. Ограничения

Pixel Perfect на точках: 360/560/1420 пикселей.
Запрещено повреждать штатную меню-систему и прочие элементы, которые уже работают.
Без избыточного JavaScript, не влияя на производительность.

дизайн