Верстка лендинга «КОМЕГА BASIC» для компании «МЗТА»

Заказчик: АО «МЗТА». 
Цель лендинга: Сбор заявок на покупку ПЛК, шкафов автоматизации и аудит систем промышленной автоматизации. 
Целевая аудитория: Интеграторы, инжиниринговые компании, проектировщики, девелоперы (ключевые пользователи – инженеры и технические специалисты). 
Сроки: 14 календарных дней с момента старта. 
Шрифты: 
o Шрифт основного текста Jura. 
o Шрифт для заголовков Gropled.
Адаптивность 
• Брейкпоинты: 
o Мобильные устройства: 375px – 1023px (включая планшеты). 
o Десктопы: от 1024px.
• Тестирование: 
o Мобильные: iPhone XR, TECNO Camon 40 Premier. 
o Десктопы: Chrome, Firefox, Safari, Edge (последние версии). 
Производительность 
• Lazy Loading: 
o Для всех секций (атрибут loading="lazy"). 
• Оптимизация: 
o Сжатие изображений (WebP). 
o Минификация CSS/JS.
Анимации и интерактив 
• Обязательно реализовать: 
o Появление/сдвиг элементов при скролле (GSAP или AOS.js). 
o Микро-анимации: ховер-эффекты для кнопок, иконок, карточек услуг. 
o Плавные переходы (CSS transitions для opacity, transform).
Структура страницы 
1. Шапка (Header) 
2. Hero-секция 
3. Области применения 
4. «Почему выбирают наш ПТК» 
5. Оборудование в ПТК
6. Программное обеспечение
7. Типовые проекты
8. Дополнительные услуги
9. Форма обратной связи
10. Футер
Функционал 
• Формы: 
o Отправка без перезагрузки страницы (AJAX). 
o Уведомление об успешной отправке (модальное окно или toast-уведомление).
• Дополнительно: 
o Адаптивное меню для мобильных устройств (бургер-меню).
Требования к коду 
• HTML: Семантическая верстка (header, section, footer). 
• CSS: 
o Preprocessor: SCSS (методология БЭМ). 
o Поддержка современных стандартов (Grid, Flexbox).
• JavaScript: 
o Библиотеки: Swiper.js (для слайдеров), GSAP/AOS.js (анимации). 
o Vanilla JS для форм и интерактива.
Оптимизация: 
o Критический CSS для первой отрисовки. 
o Отложенная загрузка скриптов (defer).
Формат сдачи: 
o Исходники на почту 
Демо: Развернуть на Netlify/Vercel для тестирования. 
Важно! Любые отклонения от макета или ТЗ согласовывать до реализации.
При возникновении неоднозначностей в макете – обращаться к дизайнеру, а не принимать решения самостоятельно. 
Приемка работ – по факту корректного отображения на всех устройствах и выполнения функционала