Задание: HTML-верстальщик. Сверстать корпоративный сайт (Tailwind / Laravel / Statamic) (Дистанционная работа)
Нужно сверстать корпоративный сайт по макетам из Figma: лендинги, страницы услуг, статьи/блог, кейсы/клиенты.
Также предусмотрены формы заявок, модальные окна и интерактивные блоки (включая калькулятор/пошаговые формы).
Верстка должна быть подготовлена для последующей интеграции в Statamic (Laravel CMS): шаблоны на Antlers (layouts, partials) с компонентной структурой и переиспользуемыми блоками. Настройка CMS и backend-разработка в рамках задачи не требуются.
Figma: https://www.figma.com/design/YxotB0tA6zzgsMobUT8VWn/%D0%90%D0%B9-%D0%9B%D0%B0%D0%B9%D0%BD.-%D0%94%D0%BB%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8?node-id=765-7445&t=FmQr80qOfA7K3eVz-1
Стек
• HTML5 (семантическая верстка)
• Tailwind CSS
• Alpine.js
• Vite
Шаблоны:
• Antlers — основной
• Blade — точечно, при необходимости
Что нужно сделать
• компонентная верстка блоками, а не цельными страницами
• каждый переиспользуемый блок оформить как отдельный шаблон / partial
• обеспечить понятную структуру шаблонов: layouts, partials, переиспользуемые блоки
• не хардкодить контент: тексты, изображения и ссылки должны быть подготовлены под вывод из CMS
• блоки должны корректно работать с разным объемом контента
• верстка должна быть пригодна для сборки страниц из блоков в CMS
Формы
• подготовить формы под backend-интеграцию, без реализации backend-логики
• реализовать базовую client-side валидацию
• обеспечить корректную HTML-структуру форм: label, name, состояния ошибок, доступность
Графика и изображения
• иконки и векторные элементы — SVG
• основной формат изображений — WebP
• PNG/JPG использовать только при крайней необходимости
• не использовать изображения для декоративных элементов, если это можно реализовать через CSS или SVG
• логотип в header, включая градиентный фон, по возможности реализовать в SVG; при необходимости дизайнер может внести корректировки в исходник
• анимацию в header реализовать аккуратно, без тяжелых библиотек, средствами CSS и/или Alpine.js, в соответствии с макетом
Изображения должны быть:
• оптимизированы по весу
• корректно масштабироваться
• корректно отображаться в адаптиве
Адаптивность
• Mobile / Tablet / Desktop
• без горизонтального скролла
• корректное отображение на основных и промежуточных разрешениях
• корректное отображение в актуальных версиях Chrome, Safari, Firefox, Edge
Требования к качеству
• минимум лишнего CSS/JS
• чистый, понятный и структурированный код
• хорошее качество по Lighthouse как ориентир (Performance / Accessibility / Best Practices / SEO)
• критические ошибки по Performance / Accessibility / SEO недопустимы
Ограничения
Не использовать без согласования:
• jQuery
• Bootstrap
• React / Vue
• сторонние UI-библиотеки
Что должно быть на выходе
• сверстанные страницы по макетам
• набор переиспользуемых блоков / шаблонов
• структура проекта, пригодная для интеграции в Laravel / Statamic
• проект (репозиторий или архив) с инструкцией по запуску
