Mise en page d'une landing page SaaS adaptative pour fintech utilisant Figma avec un thème sombre, i18n et des animations

Situation initiale : nous avons un design prêt à l'emploi dans Figma pour une page de destination publique B2B SaaS (fintech - gestion des limites et suivi des transactions). Actuellement en production, il existe une ancienne page de destination sur Bootstrap, elle ne fonctionne pas bien avec Lighthouse et ne prend pas en charge le thème sombre et la localisation. Nous devons concevoir une nouvelle page de destination en fonction de la mise en page et la préparer pour l'intégration dans l'application Next.js.

Environnement technique et introduction : conception sous Figma (ordinateur de bureau 1440, tablette 768, mobile 375) avec composants et autolayouts, polices Inter et JetBrains Mono. Assemblage - Vite, nœud 18+. Styles - Modules SCSS ou modules CSS (facultatifs, mais uniformes). Le projet a déjà configuré ESLint/Prettier, Stylelint, Husky. Vous avez besoin d'une mise en page sans frameworks d'interface utilisateur (sans Bootstrap/Tailwind/MUI), vous pouvez utiliser PostCSS et Autoprefixer. Icônes - SVG.

Ce qu'il faut faire (étapes) :
1) Démonter le layout, dresser une cartographie des sections et des états, convenir d'une liste de composants réutilisés (boutons, cartes, onglets, accordéon, fenêtres modales, badges).
2) Disposez la page selon la mise en page avec une grande précision : héros avec illustration (SVG), blocs d'avantages, cas, tarification avec le commutateur Facturation mensuelle/annuelle, avis dans le carrousel, FAQ, formulaire de demande de démo, pied de page.
3) Implémenter un thème sombre : changement de thème, corriger les couleurs/ombres/bordures, enregistrer les sélections dans localStorage, respecter le schéma de couleurs préféré.
4) Préparez un balisage i18n simple : RU/EN, changement de langue, structure de dictionnaire JSON afin que les textes puissent être remplacés sans réécrire la mise en page.
5) Ajouter des micro-animations : aspect fluide des sections lors du défilement, des états de survol/focus, des changements de prix et d'onglets (sans bibliothèques lourdes, GSAP n'est autorisé qu'avec une justification stricte).
6) Assurer l'accessibilité : sémantique, ordre de tabulation correct, focus visible, attributs aria pour les éléments interactifs, commandes clavier (y compris carrousel et fenêtre modale).
7) Configurez l'optimisation des actifs : sprite SVG ou inlining, images réactives, polices critiques pour rendre la page rapide.

Résultat spécifique : un référentiel ou une archive avec un projet Vite terminé, où l'équipe peut transférer des composants vers Next.js sans réécrire le balisage. Il est important que la mise en page soit basée sur les composants et lisible.

Limitations : vous ne pouvez pas utiliser de kits d'interface utilisateur et de générateurs prêts à l'emploi ; vous ne pouvez pas vous fier à la disposition des captures d'écran ; les changements de mise en page ne sont pas autorisés lors du chargement de polices/images ; prise en charge des dernières versions de Chrome/Firefox/Safari et iOS Safari.

Critères d'acceptation (mesurables) :
- Pixel parfait pour les points d'arrêt clés 1440/768/375 avec un écart ne dépassant pas 4 pixels pour les rembourrages principaux et la grille.
- Phare (mobile) pas moins : Performance 90, Accessibilité 95, Meilleures pratiques 95, SEO 90 sur une version propre.
- CLS <= 0,05, LCP <= 2,5s sur un profil mobile Lighthouse standard.
- Tous les éléments interactifs sont accessibles depuis le clavier, les styles de focus sont visibles, la fenêtre modale possède un piège de focus.
- Le thème et la langue sombres persistent après le redémarrage.
- Le code passe les linters sans erreurs, la construction se termine sans avertissements.

Matériel : un lien vers Figma et un guide de la marque seront fournis après le départ. Nous fournirons du contenu (textes/logos/captures d'écran), mais la mise en page doit pouvoir résister à des changements raisonnables dans la longueur du texte (notamment pour l'EN).