Layout of an adaptive SaaS landing page for fintech using Figma with a dark theme, i18n and animations

Initial situation: we have a ready-made design in Figma for a public landing page B2B SaaS (fintech - limit management and transaction monitoring). Currently in production there is an old landing page on Bootstrap, it does not work well with Lighthouse and does not support dark theme and localization. We need to design a new landing page according to the layout and prepare it for integration into the Next.js application.

Technical environment and introductory: design in Figma (desktop 1440, tablet 768, mobile 375) with components and autolayouts, Inter and JetBrains Mono fonts. Assembly - Vite, Node 18+. Styles - SCSS modules or CSS modules (optional, but uniform). The project already has ESLint/Prettier, Stylelint, Husky configured. You need a layout without UI frameworks (without Bootstrap/Tailwind/MUI), you can use PostCSS and Autoprefixer. Icons - SVG.

What needs to be done (steps):
1) Disassemble the layout, draw up a map of sections and states, agree on a list of reused components (buttons, cards, tabs, accordion, modal windows, badges).
2) Layout the page according to the layout with high precision: hero with illustration (SVG), benefit blocks, cases, pricing with the Billing monthly/annual switch, reviews in the carousel, FAQ, demo request form, footer.
3) Implement a dark theme: theme switch, correct colors/shadows/borders, saving selections in localStorage, respect prefers-color-scheme.
4) Prepare simple i18n markup: RU/EN, language switch, JSON dictionary structure so that texts can be replaced without rewriting the layout.
5) Add micro-animations: smooth appearance of sections when scrolling, hover/focus states, switching pricing and tabs (without heavy libraries, GSAP is allowed only with strict justification).
6) Ensure accessibility: semantics, correct tab order, visible focus, aria attributes for interactive elements, keyboard controls (including carousel and modal window).
7) Set up asset optimization: SVG sprite or inlining, responsive images, critical fonts to make the page fast.

Specific result: a repository or archive with a finished Vite project, where the team can transfer components to Next.js without rewriting the markup. It is important that the layout be component-based and readable.

Limitations: you cannot use ready-made UI kits and generators; you cannot rely on screenshot layout; layout shifts are not allowed when loading fonts/images; support for the latest versions of Chrome/Firefox/Safari and iOS Safari.

Acceptance criteria (measurable):
- Pixel-perfect on key breakpoints 1440/768/375 with a deviation of no more than 4px on the main paddings and grid.
- Lighthouse (mobile) no lower: Performance 90, Accessibility 95, Best Practices 95, SEO 90 on a clean build.
- CLS <= 0.05, LCP <= 2.5s on a standard Lighthouse mobile profile.
- All interactive elements are accessible from the keyboard, focus styles are visible, the modal window has a focus trap.
- Dark theme and language persist after reboot.
- The code passes linters without errors, the build is completed without warnings.

Materials: a link to Figma and a brand guide will be provided after the start. We will provide content (texts/logos/screenshots), but the layout must be able to withstand reasonable changes in text length (especially for EN).