Aspectul unei pagini de destinație SaaS adaptive pentru fintech folosind Figma cu o temă întunecată, i18n și animații

Situație inițială: avem un design gata făcut în Figma pentru o pagină de destinație publică B2B SaaS (fintech - managementul limitelor și monitorizarea tranzacțiilor). Momentan în producție există o pagină de destinație veche pe Bootstrap, nu funcționează bine cu Lighthouse și nu acceptă tema întunecată și localizarea. Trebuie să proiectăm o nouă pagină de destinație conform aspectului și să o pregătim pentru integrarea în aplicația Next.js.

Mediu tehnic și introducere: design în Figma (desktop 1440, tabletă 768, mobil 375) cu componente și autolayouts, fonturi Inter și JetBrains Mono. Asamblare - Vite, Nodul 18+. Stiluri - module SCSS sau module CSS (opțional, dar uniforme). Proiectul are deja configurate ESLint/Prettier, Stylelint, Husky. Aveți nevoie de un aspect fără cadre UI (fără Bootstrap/Tailwind/MUI), puteți utiliza PostCSS și Autoprefixer. Pictograme - SVG.

Ce trebuie făcut (pași):
1) Dezasamblați aspectul, întocmiți o hartă a secțiunilor și a statelor, conveniți asupra unei liste de componente reutilizate (butoane, carduri, file, acordeon, ferestre modale, insigne).
2) Așezați pagina conform aspectului cu mare precizie: erou cu ilustrație (SVG), blocuri de beneficii, cazuri, prețuri cu comutatorul Facturare lunară/anuală, recenzii în carusel, Întrebări frecvente, formular de cerere demo, subsol.
3) Implementați o temă întunecată: comutare de temă, corectarea culorilor/umbrelor/bordurilor, salvarea selecțiilor în Stocare locală, respectarea preferințelor-schema-coloră.
4) Pregătiți un marcaj i18n simplu: RU/EN, comutare de limbă, structură de dicționar JSON, astfel încât textele să poată fi înlocuite fără a rescrie aspectul.
5) Adăugați micro-animații: aspect neted al secțiunilor la defilare, stări de hover/focalizare, schimbarea prețurilor și a file-urilor (fără biblioteci grele, GSAP este permis doar cu o justificare strictă).
6) Asigurați accesibilitatea: semantică, ordinea corectă a tabulatorilor, focalizare vizibilă, atribute arie pentru elementele interactive, comenzi de la tastatură (inclusiv carusel și fereastră modală).
7) Configurați optimizarea activelor: sprite SVG sau inline, imagini receptive, fonturi critice pentru a face pagina rapidă.

Rezultat specific: un depozit sau o arhivă cu un proiect Vite finalizat, unde echipa poate transfera componente pe Next.js fără a rescrie marcajul. Este important ca aspectul să fie bazat pe componente și ușor de citit.

Limitări: nu puteți utiliza kituri și generatoare UI gata făcute; nu vă puteți baza pe aspectul capturii de ecran; nu sunt permise schimbări de aspect la încărcarea fonturilor/imaginilor; suport pentru cele mai recente versiuni de Chrome/Firefox/Safari și iOS Safari.

Criterii de acceptare (măsurabile):
- Pixel-perfect pe punctele de întrerupere cheie 1440/768/375 cu o abatere de cel mult 4px pe căptușeala și grila principală.
- Lighthouse (mobil) nu mai jos: Performanță 90, Accesibilitate 95, Cele mai bune practici 95, SEO 90 pe o construcție curată.
- CLS <= 0,05, LCP <= 2,5 s pe un profil mobil Lighthouse standard.
- Toate elementele interactive sunt accesibile de la tastatură, stilurile de focalizare sunt vizibile, fereastra modală are o capcană de focalizare.
- Tema întunecată și limba persistă după repornire.
- Codul trece linters fără erori, construcția este finalizată fără avertismente.

Materiale: un link către Figma și un ghid al mărcii vor fi furnizate după începere. Vom furniza conținut (texte/logo-uri/capturi de ecran), dar aspectul trebuie să poată rezista la modificări rezonabile ale lungimii textului (în special pentru EN).