Spielwiese
Sander Frontend-Design
Hier baut ihr neue Layouts für sander.melioration24.com — ohne Strapi-Anbindung, mit Dummy-Inhalten direkt im Code. Alle Seiten unten sind die 1:1-Spiegel der aktuell live geschalteten Production-Seiten. Ändert sie hier, committet/pusht — apus überträgt die Änderungen anschließend ins Production-Repo.
Layout-Bausteine
Navigation (Mega-Menü) + SidebarNav
/navigation Sticky Top-Navigation (73 px) mit Dropdown-Spalten + Spotlight, Kontakt-/Hub-Buttons, mobilem Akkordeon-Menü — plus rechte Anker-Navigation (SidebarNav) mit Scroll-Spy
Footer
/footer Standard-Seitenfuß: Adresse/Kontakt, Social-Links, rechtliche Links + Copyright; alles über Props überschreibbar
Content-Module
Headline
/headline Reines Überschriften-Modul — H1–H6 wählbar, animierter roter Balken, links oder zentriert
Rich Text Media Container
/rich-text-media-container Flexibler Strapi-Container — Layouts 1-1-1-1, 2-2, 1-3; Spalten Text/Bild/Video, 0-2 CTAs, Lightbox, YouTube/Instagram
Accordion (FAQ)
/accordion FAQ-Accordion nach Figma — rote Title-Linie, Pfeil-Rotation, Eck-Marken; auf-/zuklappen 300 ms, single- oder multi-open
Testimonial (Zitat)
/testimonial Kundenstimme im Deco-Raster mit Eck-Kreuzen — dreifarbiges Zitat (Rot/Navy/Stahlblau), Wort-für-Wort-Einfärbung beim Scrollen; Varianten mit + ohne Avatar
Reviews (Kundenstimmen)
/reviews Review-Cards über 4 Grid-Spalten — Sterne-Rating, Titel, Google-Rezension, Firma + Name; Cards faden beim Scrollen gestaffelt von links nach rechts ein
CTA-Banner
/cta Call-to-Action in drei Varianten — rotes, graues (graphit) und weißes Panel (mit rotem Rahmen + gefülltem Button); optional bis zu 2 Buttons; Inhalt eingerückt, Fade-in + Button-Hover (Pfeil ↗→→)
Label Card Grid
/label-card-grid Karten-Raster (Label + Text) — Layouts 1-1-1-1 / 2-2, max. 8 Karten, optional Bild + CI-Overlay-Verlauf + Link, Schriftfarbe primary/secondary, Hover-Raster
TeaserBox (Anreißer-Karte)
/teaser-box Anreißer-Karte nach Figma 457:256 — Bild, Kategorie-Badge (CI-Farben), Headline, Kurztext + WEITERLESEN-Leiste; ganze Karte verlinkt eine Seite, Bild-Zoom + roter CTA beim Hover
Tabelle
/tabelle Datentabelle im Grid-Linien-Stil — Kopfzeile + Datenzeilen, 2 oder 4 Spalten (= Grid-Spalten), Inhalte linksbündig, optional Zebra-Streifen, responsiv horizontal scrollbar
Vergleichstabelle (interaktiv)
/vergleichstabelle Zwei Fahrzeuge per Dropdown wählen und gegenüberstellen — Bild, Name + technische Daten / Auswahlkriterien; 2 Spalten (je 2 Grid-Spalten), Mittellinie auf der 50%-Gridlinie
Gegenüberstellung (Wir vs. Andere)
/versus-tabelle Statische Pro/Contra-Gegenüberstellung — linke Spalte eigene Stärke (rotes ✓), rechte Spalte Konkurrenz (graues ✗), VS-Badge zentriert auf der 50%-Mittellinie; 3–7 Zeilen, Grid-Linien-Stil
Tabs (Ausstattung/Features)
/tabs Reiter oben (aktiv = rote Unterstreichung), darunter links Beschreibung + Positionszähler, rechts Feature-Checkliste mit roten Häkchen in 2 Spalten; Trennlinie auf der 25%-Gridlinie
Galerie (Bildergalerie)
/gallery Mosaik aus breiten + quadratischen Kacheln nach Figma 600:826 — 4–10 Medien (Backend-definiert), Bild-Zoom beim Hover, weißer Hintergrund mit ausgefadeten Rändern; Klick öffnet Lightbox mit Pfeil-Navigation (←/→/Esc, Zähler). Mobil (≤600px) Swipe-Karussell mit Punkten + Fortschrittsbalken. Optional Video-Kacheln (Poster + Play, lokal oder YouTube)
Produkt-Infobox (Detailseiten-Kopf)
/produkt-infobox Seitenanfang einer Produkt-Detailseite mit Hochzähler-Kennwerten — drei Layouts: Bild 3 Grid-Spalten + Infobox 1, Bild 2 + Infobox 2, oder Bild 1 + Infobox 3 (Inhalt nebeneinander: Kennwerte | Merkmale | Preis + CTAs)
Kennzahlen-Band (Hochzähler)
/kennzahlen Band aus 2–4 Kennzahlen, die beim Scrollen von 0 hochzählen (easeOutCubic, 1600 ms); Trenner bündig auf den Gridlinien (2 oder 4 fluchten), responsiv 2/1 Spalten
Vorher/Nachher-Slider
/vorher-nachher Zwei Bilder per Schieberegler vergleichen (Maus, Touch, Tastatur) — oberes Bild per clip-path beschnitten; vollbreit, Außenkanten bündig auf den Rasterlinien
Prozess-/Ablauf-Schritte
/ablauf Ablauf-Schritte (z. B. Mietablauf) in 3 Varianten: horizontale Verbindungslinie färbt sich rot, Boxen färben sich der Reihe nach hellgrau, oder vertikal scroll-gesteuert mit mitlaufender Fortschrittslinie + sticky Bild je Schritt
Bild-Hotspots
/bild-hotspots Bild-Hotspots in 3 Varianten: Flotte (je Fahrzeug, Info-Panel rechts + Button), Ausstattung (einzelner Stapler, Bauteile), und Panorama-Servicekarte über alle 4 Grid-Spalten mit Hover-Popups (alle Dienstleistungen)
Slider / Karussell
/slider Infinite-Loop-Karussell (Klon-Technik) für Karten (z. B. Veranstaltungen): Autoplay 4 s mit Pause bei Hover, Pfeil-/Punkt-Navigation, Drag (Maus + Touch), Bild-Zoom, Fortschrittsbalken + Zähler; 4 Karten sichtbar, responsiv 3/2/1
Liniendiagramm
/liniendiagramm Interaktives Canvas-Liniendiagramm (ohne Chart-Library): Achsen + Gitter, gestricheltes Crosshair, Hover-Tooltip mit vergrößertem Datenpunkt; Linien zeichnen sich beim Scrollen ein (easeOutCubic, 1200 ms); 1–4 Datenreihen
Kurven-Chart (Phasen)
/kurven-chart SVG-Bézier-Kurve in Phasen segmentiert (Lightdash-Stil): Hover färbt den Bereich unter der Kurve + das Kurven-Segment rot, das Text-Panel oben aktualisiert sich; Kurve zeichnet sich beim Scrollen ein (stroke-dashoffset, 1400 ms); 2–6 Phasen, optional 4 Phasen bündig im Grid
Schulungen
Schulungen Übersicht
/schulungen/uebersicht Hauptseite mit allen Kursen, Reviews, Vorteilen und CTA
Grundausbildung Staplerfahrer (Beispiel-Detailseite)
/schulungen/grundausbildung-staplerfahrer Detail-Layout zum Kopieren für andere Schulungen
Fahrschultermine
/fahrschultermine Interaktiver Kalender mit Termin-Filterung
Anmeldeformular
/anmelden Verbindliche Anmeldung
Hinweise
npm run devstartet den Dev-Server lokal.- Alle Seiten in
src/pages/, Komponenten insrc/react/odersrc/components/. - Bilder unter
public/images/ablegen. - Die Datei CLAUDE.md erklärt Claude Code, was er hier tun und lassen soll.