Необходимо:
поднять проект шаблон на Vite
Требования:
использовать функциональные компоненты
использовать шаблон с typescript
пропсы для компонентов должны быть типизированы (без использования any)
учесть, что некоторые компоненты могут в дальнейшем переиспользоваться на других страницах
использовать один из трёх вариантов работы со стилями:
обычные css-файлы (как в дефолтном шаблоне) с использованием БЕМ-методологии
css-modules
styled components
нельзя использовать UI библиотеки для написания стилей, все стили должны быть описаны только в коде самого проекта
необходимо использовать правильные шрифты, их можно скачать с https://fonts.google.com/, найти по тому названию, которое указано в Figma
данные для вёрстки необходимо захардкодить, формы не должны никуда отправлять данные
необходимые состояния компонентов (сворачивание/разворачивание элементов и прочее) должны обрабатываться с помощью стандартных хуков react-a (без стейт-менеджеров)
проект должен запускаться локально в dev-режиме, если для его запуска необходимы дополнительные действия, нужно прописать их в файле Readme
Дополнительные баллы (помимо 10 баллов за стандартное задание) можно получить за следующие улучшения:
pixel perfect: будет проверяться только тот размер экрана, который реализован в макетах, с помощью специального плагина - максимум 5 баллов
адаптивность и мобильный вид: самостоятельно поддержать адаптивность макета для всех расширений экрана от указанного в макетах до 320px (самый маленький экран мобильного телефона) - максимум 5 баллов
анимации: добавить указанные в макетах анимации - максимум 2 балла
a11y: задано правильное дерево заголовков, используется семантическая вёрстка, используются атрибуты alt у картинок, используются aria-* атрибуты, где необходимо - максимум 4 балла
оптимизация загрузки ресурсов: оптимизированы картинки и шрифты - максимум 3 балла
Дополнительные баллы будут начисляться за каждый из пунктов отдельно, так что можно реализовать как все их них и получить максимум баллов, так и часть из них.
Что можно реализовать уже сейчас, но это будет учитываться при оценке финального проекта:
использую Atomic Design Ссылка на макет: