Верстка по 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, виправлення за результатами ревью.