Тестовое задание · 28 Mar 2023

mirfak - лендинг digital-агентства, рефакторинг статичного тестового в рабочий сайт

• HTML
• SCSS
• Vanilla JS
• Splide
• Responsive
• Accessible

Русскоязычный лендинг веб-студии (шапка, первый экран со слайдером Splide, аккордеон услуг, сетка портфолио, карусель отзывов, контакты и форма заявки), отданный как статичное тестовое на HTML/CSS/JS с реальными дефектами: оба слайдера Splide цеплялись за стрелки первого, из-за чего вторая карусель не работала; аккордеон был собран из недоступных div и сам раскрывался при скролле; все ссылки навигации вели на '#'; форма не имела обработчика; страница объявляла lang=en на полностью русском контенте; медиазапросов не было вообще; тексты были lorem ipsum с чужим брендом 'Digital Qala', а фото отзывов грузились по http со сторонних доменов. Пересобрано в рабочий сайт с сохранением существующего визуального стиля. Сначала баги: инициализация слайдеров переведена на per-root, аккордеон стал настоящими кнопками с aria-expanded и анимацией высоты через grid-template-rows, навигация связана с якорными секциями со scroll-padding под фиксированную шапку, у формы появились name, типы и валидация. Затем недостающее: секции Клиенты (статистика и стена логотипов) и Стоимость (три тарифа), модальная форма заявки по любому CTA с клиентской валидацией, состоянием успеха, фокус-трапом, закрытием по Escape и анимацией появления и масштаба, динамический год в подвале и кастомный фавикон-монограмма 'n' (SVG, размеры PNG, apple-touch, манифест). Плейсхолдеры заменены правдоподобным русским контентом, добавлен полный адаптив 390-1440 (бургер-меню, схлопывающиеся сетки, без горизонтального скролла), доступность доведена до реального уровня (skip-ссылка, лендмарки, focus-visible, доступные имена, учёт reduced-motion), а анимации усилены scroll-reveal и микро-взаимодействиями на ease-out-expo. Статичный HTML + SCSS + ванильный JS со Splide, самостоятельный хостинг на сервере Hetzner за Caddy.