Верстка по макету: адаптивні сторінки B2B SaaS-кабінету з дизайн-токенами та станами компонентів

Є діючий B2B SaaS для управління закупівлею та складом. Дизайн оновили у Figma, але інтерфейс у продукті частково на старій верстці, частково у застарілому UI-kit. Потрібно скидати по макету набір ключових екранів особистого кабінету так, щоб їх можна було безболісно підключити до поточного фронтенду.

Технічне середовище та вихідні дані
- Макети та прототипи у Figma: desktop 1440, tablet 1024, mobile 375, включаючи hover-focus-active-disabled, empty-error-loading states
- Поточний стек: React 18, Vite, TypeScript, SCSS Modules, Storybook вже підключено
- У проекті є базові компоненти, але вони не збігаються з новим дизайном – допускається створення нового шару UI-компонентів поряд зі старим

Обсяг робіт та етапи
1) Аудит макетів та узгодження карти екранів-компонентів: виділити блоки, що перевикористовуються, визначити сітку, типографіку, кольори, spacing, стани
2) Налаштування дизайн-токенів у коді: CSS variables для кольорів, типографіки, радіусів, тіней, z-index, spacing scale. Підтримка light та dark теми з макета
3) Верстка та інтеграція в проект 6 екранів кабінету (з підключенням до існуючих сторінок-роутів без зміни бізнес-логіки):
- Дашборд з віджетами та адаптивною перебудовою сітки
- Таблиця замовлень: липкий header, горизонтальний скролл на вузьких екранах, стан empty-loading-error
- Сторінка замовлення: двоколонова композиція, блоки з колапсами, адаптив до mobile
- Форма створення замовлення: багатокрокова розкладка, валідаційні стани полів (візуально), disabled та helper texts
- Центр повідомлень: угруповання за датами, віртуалізацію не робити, але забезпечити продуктивну верстку та коректні переноси
- Налаштування профілю: секції, toggles, підтвердження дій (модальне вікно)
4) Компоненти UI рівня: Button, Input, Select (кастомна стилізація поверх нативного), Checkbox, Toggle, Badge, Tabs, Modal, Tooltip, Skeleton, Toast. Компоненти повинні мати стани з макета та бути оформлені у Storybook
5) Кросбраузерна перевірка та полірування: Chrome, Firefox, Safari, Edge. Виправлення розбіжностей із Figma

Обмеження
- Не чіпати API, бізнес-логіку та типи даних - завдання саме про верстку, стилі, компонування, стани та підключення до поточних сторінок
- Не використовувати важкі UI-бібліотеки (MUI, AntD та аналоги) - тільки існуючий стек та власні стилі
- Верстка повинна бути без прив'язки до pixel-perfect на рівні 1-2px, але з дотриманням сітки, відступів та типографіки в межах допусків
- Доступність: видимі focus-стани, коректний tab-order, aria-label для іконок-кнопок, контраст тексту не нижче WCAG AA для основного тексту

Конкретний результат
- PR у репозиторії з готовою версткою 6 екранів та набором UI-компонентів
- Storybook з усіма компонентами та їх станами
- Короткий README: як запускати, де дивитися сторінки, які токени додані

Вимірні критерії приймання
- Візуальна відповідність Figma на контрольних брейкпоінтах 1440-1024-768-375 з допуском за відступами до 4px та за розмірами шрифту до 1px
- Немає горизонтального скролла сторінки на 375 та 768, крім таблиці замовлень, де він допускається усередині контейнера
- Всі інтерактивні елементи мають hover-focus-active-disabled стану як у макеті
- Lighthouse (Chrome) для будь-якої з нових сторінок: Accessibility не нижче 90, Best Practices не нижче 90 (без урахування бекенду)
- Немає критичних помилок у консолі при навігації по нових сторінках

Матеріали
- Доступ до Figma та репозиторію надам, список сторінок та посилання на макети перед стартом. У процесі очікується 2-3 короткі дзвінки для синхронізації за компонентами та допусками.