Задание: HTML-верстальщик. Верстка главной страницы сайта (Дистанционная работа)
Нужно сверстать главную страницу сайта по макету Figma
Фрилансеру будет предоставлен макет Figma. Все изображения, иконки, тексты, цвета, размеры и визуальные элементы нужно брать из макета.
Стек проекта
Сайт сделан на Next.js с использованием React и TypeScript.
Нужно выполнить вёрстку не отдельным HTML-файлом, а в формате, подходящем для внедрения в существующий проект:
Next.js: проект использует современную структуру Next.js с React-компонентами;
React: все блоки главной страницы должны быть реализованы как компоненты;
TypeScript: код компонентов должен быть написан с типизацией;
CSS / CSS Modules: стили можно писать обычным CSS или CSS Modules;
адаптив желательно делать через CSS media queries, flex/grid, clamp, min/max и другие стандартные CSS-инструменты;
без подключения тяжёлых UI-библиотек, если они не нужны для задачи.
Задача
Нужно реализовать качественную адаптивную главную страницу по Figma-макету.
Страница должна корректно отображаться на:
мобильных телефонах;
планшетах;
ноутбуках;
десктопах;
широких мониторах.
Ориентир по ширинам: от 320px до 2560px.
Основные требования
вёрстка должна визуально соответствовать Figma-макету;
страница должна быть полностью адаптивной;
не должно быть горизонтального скролла;
элементы не должны накладываться друг на друга;
текст не должен вылезать за пределы кнопок, карточек и блоков;
изображения не должны ломать сетку или пропадать;
кнопки и кликабельные элементы должны оставаться удобными на мобильных устройствах;
на мобильной версии можно аккуратно перестраивать блоки, если это улучшает адаптив;
важно сохранить общий стиль макета: цвета, шрифты, иллюстрации, композицию и настроение страницы.
Что нужно проверить перед сдачей
Проверить страницу в браузере минимум на ширинах:
320px
375px
414px
768px
1024px
1366px
1920px
2560px
Ожидаемый результат
Готовая адаптивная главная страница на Next.js / React / TypeScript / CSS, свёрстанная по Figma-макету, без визуальных багов на ПК и мобильных устройствах.
