Вёрстка сайтов — удалённая работа в Москве

Сверстать: лендинг. Платформа: Joomla. Тип вёрстки: адаптивная. Есть макет. Заказчик: АО «МЗТА». Цель лендинга: Сбор заявок на покупку ПЛК, шкафов автоматизации и аудит систем промышленной автоматизации. Целевая аудитория: Интеграторы, инжиниринговые компании, проектировщики, девелоперы (ключевые пользователи - инженеры и технические специалисты). Сроки: 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 для тестирования. Важно! Любые отклонения от макета или ТЗ согласовывать до реализации. При возникновении неоднозначностей в макете - обращаться к дизайнеру, а не принимать решения самостоятельно. Приемка работ - по факту корректного отображения на всех устройствах и выполнения функционала.