Layout einer adaptiven SaaS-Landingpage für Fintech mit Figma mit dunklem Theme, i18n und Animationen

Ausgangssituation: Wir haben in Figma ein fertiges Design für eine öffentliche Landingpage B2B SaaS (Fintech – Limitverwaltung und Transaktionsüberwachung). Derzeit in der Produktion gibt es eine alte Landingpage auf Bootstrap, sie funktioniert nicht gut mit Lighthouse und unterstützt kein dunkles Theme und keine Lokalisierung. Wir müssen entsprechend dem Layout eine neue Landingpage entwerfen und sie für die Integration in die Next.js-Anwendung vorbereiten.

Technische Umgebung und Einführung: Design in Figma (Desktop 1440, Tablet 768, Mobil 375) mit Komponenten und Autolayouts, Inter- und JetBrains Mono-Schriftarten. Versammlung – Vite, Knoten 18+. Stile – SCSS-Module oder CSS-Module (optional, aber einheitlich). Für das Projekt sind ESLint/Prettier, Stylelint und Husky bereits konfiguriert. Sie benötigen ein Layout ohne UI-Frameworks (ohne Bootstrap/Tailwind/MUI), Sie können PostCSS und Autoprefixer verwenden. Symbole - SVG.

Was muss getan werden (Schritte):
1) Zerlegen Sie das Layout, erstellen Sie eine Karte der Abschnitte und Staaten, vereinbaren Sie eine Liste der wiederverwendeten Komponenten (Schaltflächen, Karten, Registerkarten, Akkordeon, modale Fenster, Abzeichen).
2) Layouten Sie die Seite entsprechend dem Layout mit hoher Präzision: Held mit Illustration (SVG), Leistungsblöcke, Fälle, Preise mit der Umstellung „Abrechnung monatlich/jährlich“, Bewertungen im Karussell, FAQ, Demo-Anfrageformular, Fußzeile.
3) Implementieren Sie ein dunkles Thema: Themenwechsel, korrekte Farben/Schatten/Ränder, Speichern der Auswahl in localStorage, Berücksichtigung des bevorzugten Farbschemas.
4) Bereiten Sie ein einfaches i18n-Markup vor: RU/EN, Sprachumschaltung, JSON-Wörterbuchstruktur, damit Texte ersetzt werden können, ohne das Layout neu zu schreiben.
5) Mikroanimationen hinzufügen: glatte Darstellung von Abschnitten beim Scrollen, Hover-/Fokuszustände, Wechseln von Preisen und Tabs (ohne umfangreiche Bibliotheken ist GSAP nur mit strenger Begründung zulässig).
6) Stellen Sie die Barrierefreiheit sicher: Semantik, korrekte Tab-Reihenfolge, sichtbarer Fokus, Arienattribute für interaktive Elemente, Tastatursteuerung (einschließlich Karussell und modales Fenster).
7) Richten Sie die Asset-Optimierung ein: SVG-Sprite oder Inlining, responsive Bilder, wichtige Schriftarten, um die Seite schnell zu machen.

Konkretes Ergebnis: ein Repository oder Archiv mit einem fertigen Vite-Projekt, in dem das Team Komponenten nach Next.js übertragen kann, ohne das Markup neu zu schreiben. Es ist wichtig, dass das Layout komponentenbasiert und lesbar ist.

Einschränkungen: Sie können keine vorgefertigten UI-Kits und Generatoren verwenden. Sie können sich nicht auf das Screenshot-Layout verlassen; Layoutverschiebungen sind beim Laden von Schriftarten/Bildern nicht zulässig. Unterstützung für die neuesten Versionen von Chrome/Firefox/Safari und iOS Safari.

Akzeptanzkriterien (messbar):
- Pixelgenau an wichtigen Haltepunkten 1440/768/375 mit einer Abweichung von nicht mehr als 4 Pixeln an den Hauptabständen und dem Raster.
- Lighthouse (mobil) nicht niedriger: Leistung 90, Zugänglichkeit 95, Best Practices 95, SEO 90 bei einem sauberen Build.
- CLS <= 0,05, LCP <= 2,5 s auf einem Standard-Lighthouse-Mobilprofil.
- Alle interaktiven Elemente sind über die Tastatur zugänglich, Fokusstile sind sichtbar, das modale Fenster verfügt über eine Fokusfalle.
- Dunkles Design und dunkle Sprache bleiben nach dem Neustart bestehen.
– Der Code übergibt Linters ohne Fehler, der Build wird ohne Warnungen abgeschlossen.

Materialien: Ein Link zu Figma und ein Markenleitfaden werden nach dem Start bereitgestellt. Wir stellen Inhalte (Texte/Logos/Screenshots) zur Verfügung, das Layout muss jedoch vertretbaren Änderungen der Textlänge (insbesondere für EN) standhalten.