Верстка адаптивного лендингу SaaS для фінтеху з Figma з темною темою, i18n та анімаціями

Вихідна ситуація: у нас є готовий дизайн у Figma для публічного лендінгу B2B SaaS (фінтех – управління лімітами та моніторинг транзакцій). Зараз на проді стоїть старий лендинг на Bootstrap, він погано проходить Lighthouse і не підтримує темну тему та локалізацію. Потрібно згорнути новий лендинг за макетом і підготувати його до інтеграції в Next.js-додаток.

Технічне середовище та вступні: дизайн у Figma (desktop 1440, tablet 768, mobile 375) з компонентами та автолейаутами, шрифти Inter та JetBrains Mono. Складання - Vite, Node 18+. Стилі - SCSS modules або CSS modules (на вибір, але однаково). У проекті вже налаштовані ESLint/Prettier, Stylelint, Husky. Потрібна верстка без UI-фреймворків (без Bootstrap/Tailwind/MUI), допускається використання PostCSS та Autoprefixer. Іконки - SVG.

Що потрібно зробити (етапи):
1) Розібрати макет, скласти карту секцій і станів, погодити список компонентів, що перевикористовуються (кнопки, картки, таби, акордеон, модальні вікна, бейджі).
2) Згортати сторінку з макетом з високою точністю: hero з ілюстрацією (SVG), блоки переваг, кейси, pricing з перемикачем Billing monthly/annual, відгуки в каруселі, FAQ, форма запиту демо, футер.
3) Реалізувати темну тему: перемикач теми, коректні кольори/тіні/кордони, збереження вибору в localStorage, поважати prefers-color-scheme.
4) Підготувати просту i18n-розмітку: RU/EN, перемикач мови, структура словників JSON, щоб тексти можна замінити без переписування верстки.
5) Додати мікроанімації: плавні появи секцій при скролі, hover/focus-стану, перемикання pricing та табів (без важких бібліотек, допускається GSAP лише за суворого обґрунтування).
6) Забезпечити доступність: семантика, коректний порядок табуляції, видимий focus, aria-атрибути для інтерактивних елементів, керування з клавіатури (включаючи карусель та модальне вікно).
7) Налаштувати оптимізацію ассетів: SVG спрайт або інлайнінг, responsive images, критичні шрифти, щоб сторінка була швидкою.

Конкретний результат: репозиторій чи архів із готовим проектом Vite, де команда зможе перенести компоненти у Next.js без переписування розмітки. Важливо, щоб верстка була компонентною та читабельною.

Обмеження: не можна використовувати готові UI-кити та генератори; не можна покладатися на скріншотну верстку; не допускаються layout shifts під час завантаження шрифтів/зображень; підтримка останніх версій Chrome/Firefox/Safari та iOS Safari.

Критерії приймання (вимірні):
- Pixel-perfect за ключовими брейкпоїнтами 1440/768/375 з відхиленням не більше 4px по основним відступам та сітці.
- Lighthouse (mobile) не нижче: Performance 90, Accessibility 95, Best Practices 95, SEO 90 на чистому складанні.
- CLS <= 0.05, LCP <= 2.5s на типовому мобільному профілі Lighthouse.
- Всі інтерактивні елементи доступні з клавіатури, видимі focus-стилі, модальне вікно має focus trap.
- Темна тема та мова зберігаються після перезавантаження.
- Код проходить лінтери без помилок, складання виконується без попереджень.

Матеріали: посилання на Figma та бренд-гайд дамо після старту. Контент (тексти/логотипи/скриншоти) надамо, але верстка повинна витримувати розумні зміни довжини тексту (особливо EN).