Верстка по Figma для финтех-кабинета партнера с темизацией, Pixel Perfect и интеграцией в Next.js дизайн-систему

Исходная ситуация и предметная область - есть продукт в финтехе - личный кабинет партнера для оформления заявок на выплаты и мониторинга статусов. Дизайн обновили в Figma и частично пересобрали UI-kit, но фронтенд-команда занята бэкенд-интеграциями. Требуется сверстать набор экранов по макету и отдать результат в виде готовых React/Next.js компонентов, которые можно сразу подключить в существующий проект.

Техническая среда - Next.js 14 (App Router), TypeScript, CSS Modules + PostCSS, Storybook 7, Figma (auto-layout, variables), сборка через pnpm. В проекте уже есть базовые примитивы (Button, Input, Modal), но для части блоков нужны новые составные компоненты и адаптивные состояния. Доступ к репозиторию и макетам предоставляется.

Что нужно сделать - сверстать по макету и собрать в компоненты следующие разделы кабинета:
1) Дашборд партнера - карточки метрик, график (без реализации данных - только верстка и состояния), блок уведомлений, пустые состояния.
2) Список заявок - таблица с фиксированной шапкой, горизонтальным скроллом на малых экранах, состояниями loading/empty/error, строками разных типов.
3) Детальная страница заявки - таймлайн статусов, блок реквизитов, панель действий, предупреждения.
4) Модальные окна и drawer-окна - создание заявки, подтверждение, ошибки валидации, просмотр документов.

Ограничения и требования - без подключения сторонних UI-библиотек (MUI/Antd и т.п.). Допускается использование уже существующих внутренних примитивов. Верстка должна учитывать RTL не требуется, но обязательны темная и светлая темы через CSS variables, а также корректная работа при системном увеличении шрифта до 125%. Анимации только CSS, без framer-motion. Семантика и доступность обязательны - корректные role/aria для модалок, фокус-ловушка, видимый focus-ring, управление клавиатурой.

Профессиональные ожидания - работа предполагает анализ макета, выстраивание структуры компонентов, согласование токенов (цвета/отступы/радиусы), настройку адаптива и проверку пиксельной точности.

Конкретный результат - PR в репозиторий с компонентами и страницами, подключенными к маршрутам Next.js, плюс Storybook-сторис для всех новых составных компонентов и их состояний.

Измеримые критерии приемки - Pixel Perfect отклонение не более 2px на контрольных брейкпоинтах 375/768/1280. Lighthouse Accessibility не ниже 95 для сверстанных страниц в режиме без данных. Все интерактивные элементы доступны с клавиатуры, модалки закрываются по Esc и клику вне, фокус возвращается на триггер. Не должно быть горизонтального скролла страницы на 375px, кроме области таблицы в списке заявок, где скролл допускается внутри контейнера. Сборка pnpm build проходит без ошибок TypeScript и без варнингов линтера, связанные с версткой. Компоненты покрывают состояния - default/hover/focus/disabled/loading/empty/error согласно макету.

Этапы выполнения - первичный аудит Figma и согласование структуры компонентов. Верстка базовых токенов и тем. Реализация страниц и составных компонентов. Прогон по чек-листу доступности и Pixel Perfect, правки по результатам ревью.