Sektionen

Bausteine aus den LEO-Projekten — pro Eintrag eine kopierbare .tsx-Datei. Im Konfigurator zusammenstellen, live ansehen und als Agent-Prompt exportieren.

Navbar1

NavbarCenteredRounded

Zentrierte, abgerundete Floating-Navbar (Pill-Form): hüllt den Inhalt auf Desktop ein, klappt mobil zu einem zweispaltigen Panel auf. Mit Dropdown-Gruppen und CTA.

Hero5

HeroSplitImage

Voll-Viewport-Hero mit Bild links und dunklem Marken-Panel rechts (santuens-Stil). Display-Schrift mit kursiver Betonungszeile, Tagline mit Trennlinie, CTA-Buttons.

HeroGradientGlow

Textzentrierter dunkler Hero ohne Bild (nikolacalio-Stil): Tiefe durch farbige Glow-Flächen, Eyebrow, mehrzeilige Headline mit Unterstreichungs-Akzent, Fakten-Zeile.

HeroVideoOverlay

Voll-Viewport-Hero mit loopendem Hintergrund-Video (intersolaris-Stil): dunkler Links-Rechts-Verlauf über dem Video, linksbündige Headline, Lead, Sterne-Bewertungs-Badge und zwei CTAs. Nutzt das Asset-Management (videoList + Poster-Frame).

HeroMarsFloat

Dunkler Vollflächen-Hero (homepage-Stil): cineastisches Hintergrundbild, Headline mit Häkchen-Liste und zwei CTAs links, ein Dreieck sanft schwebender Icons rechts (nur Desktop). Float-Keyframes sind in die Sektion gekapselt und respektieren reduced-motion.

HeroStitchIntegrations

Heller SaaS-Integrations-Hero (Stitch-Stil): Floating-Navbar, zentrierte Headline, zwei CTAs, Hub-and-Spoke-Verbindungsgrafik mit App-Karten und Trust-Logo-Zeile.

Über uns1

AboutTeaserSplit

Über-uns-Teaser (intersolaris-Stil): quadratisches Bild neben einem Textblock mit zwei Absätzen, einem akzentuierten Zitat-Block (linke Leiste + Zitat-Icon) und Outline-CTA.

Leistungen / Features2

FeatureCardsGrid

Feature-/Leistungs-Sektion: Eyebrow-Überschrift und responsives 2/3-spaltiges Raster aus Rahmen-Karten mit Icon-Badge, Titel und Beschreibung; Hover-Akzent in Primärfarbe.

FeaturesStickyScroll

Feature-Showcase mit Sticky-Scroll-Split (keet.io-Stil): eine hohe Spalte aus Feature-Blöcken scrollt links vorbei, während rechts eine Vorschau-Karte stehen bleibt. Reines CSS — position: sticky auf einer Karte in einer Grid-Zelle, die sich auf die volle Höhe der Scroll-Spalte streckt; kein JS, keine Scroll-Listener. Rechte Spalte nur Desktop, mobil stapeln die Blöcke.

Warum wir / Vertrauen2

TrustBandDark

Vertrauens-Band auf dunklem Gradient-Panel mit radialem Glow (intersolaris-Stil): zentrierte Überschrift und vier zentrierte Icon-Kreis-Karten mit Grund und Beschreibung.

WhySplitFeatures

'Warum wir'-Sektion (intersolaris-Stil): geteilter Intro-Bereich (Textblock mit Pill, Absätzen und Ansprechpartner-Karte links, Porträt-Karte rechts) über einem vierspaltigen Raster aus Gründe-Karten.

Ablauf / Prozess1

ProcessSteps

Nummerierte Prozess-Schritte mit Verbindungslinie, horizontal auf Desktop.

Preise2

PricingCards

Preis-Sektion (homepage-Stil): drei Tarif-Karten mit großem Gradient-Preis ('ab X €'), typischer Preisspanne, Leistungsliste und CTA, darunter eine Preisfaktoren-Notiz.

PricingBreakdownCards

Preis-Aufschlüsselung einer einzelnen Leistung (homepage-Stil): bis zu drei transluzente, schattenlose Panels mit warmem Akzent-Gradient - Setup (einmalig, überdimensionierter Preis), monatliche Pflegegebühr und eine Preisfaktoren-Karte mit Aufzählung und Akzent-Kontakt-CTA. Bewusst anders als PricingCards (Tarif-Raster). Das Raster zentriert und verschmälert sich, wenn die Monatskarte entfällt.

Stimmen / Bewertungen2

TestimonialsCards

Bewertungs-Karten mit Zitat, Sterne-Rating und Namen.

ReviewsGoogleCarousel

Bewertungs-Sektion (intersolaris-Stil): zentrierter Intro-Bereich mit Gesamt-Bewertungs-Badge, darunter ein Scroll-Snap-Karussell aus Bewertungs-Karten (Projekt-Tag, Sterne, Titel, Zitat, Name), das auf großen Screens zum dreispaltigen Raster wird.

FAQ1

FaqAccordion

FAQ-Akkordeon mit rotierendem Plus-Icon und sanfter Höhen-Animation (CSS grid-rows).

Call-to-Action2

CtaBand

Call-to-Action-Karte in voller Breite: dunkler Gradient mit Glow, Botschaft + Haupt-CTA links, direkte Kontaktkanäle rechts.

CtaCentered

Zentrierter Call-to-Action (homepage-Stil): große Headline mit Akzentwort, zwei Buttons (E-Mail / Termin buchen) und dezente Kontaktzeile darunter.

Kontakt3

FormWizardSteps

Mehrstufiges Anfrage-Formular (allgroups/moramontage-Stil): 5 Schritte (Projektart → Leistungen → Projekt → Kontakt → Übersicht) mit Karten-Auswahl (Einzel- und Mehrfachauswahl), klickbarem Schritt-Indikator, Validierung pro Schritt, Draft-Speicherung im localStorage, Honeypot-Spamschutz, Datenschutz-Checkbox, Zusammenfassung mit Bearbeiten-Links und Erfolgs-Screen. Modular aus Feld-/Step-Bausteinen aufgebaut.

ContactFormSplit

Kontakt-Sektion: Info-Spalte (Adresse, Telefon, Zeiten) neben einem einfachen Formular.

ContactFormCards

Kontakt-Sektion (intersolaris-Stil): Formular-Karte mit Interesse-Auswahl, Datenschutz-Checkbox und Sende-Status (Laden / Erfolg / Fehler) neben klickbaren Direktkontakt-Karten (Telefon, E-Mail, Adresse).

Footer2

FooterColumnsDark

Dunkler dreispaltiger Footer (nikolacalio-Stil): Marke + Social-Icons, Navigation, Kontakt mit Icons und separater Legal-Zeile.

FooterAccordionContact

Dunkler Gradient-Footer mit Marken-/Kontaktspalte und Linkgruppen, die mobil zu Akkordeons einklappen (santuens-Stil).

Utilities2

MarkdownArticle

Markdown-Rendering im Projektstandard: marked + markdown.css (.markdown-body) — Überschriften mit Akzentbalken, Listen, Zitate, Tabellen, Code.

CookieBanner

DSGVO-Cookie-Banner (intersolaris-Standard): Intro- und Einstellungs-Ansicht mit Kategorie-Karten (Statistik, Komfort, Marketing), Consent in localStorage, CookieSettingsButton für den Footer.