Design System
Playground Zur Vorlage

LayoutsLandingpage

Layout · Seite · unique

Landingpage

layouts/Landingpage.astro

Seiten-Layout für die Landingpage: BasisLanding-Hülle mit CtaFormular-Hero (Formular statt Slot-Pille), fünf Sektionen mit einem Nacht-Wechsel bei StatsBand — FinalCta band und StickyCta leiste hängt die Hülle selbst nach main an.

Regeln

  • Nutzt BasisLanding — Header, Hero-Slot kommen aus der Hülle; die Hülle rendert FinalCta band · paper und StickyCta leiste · paper fest nach main, ohne Slot — das Layout setzt sie nicht noch einmal (siehe BasisLanding.astro).
  • Hero-Slot trägt CtaFormular split · nacht explizit (deckt sich mit dem Default-Fallback der Hülle) — Satz vor Formular auf Mobil, trägt die erste Aktion.
  • Nur StatsBand ist Nacht in der Mitte; Hero und das Final-CTA-Band der Hülle liegen auf ihren eigenen Flächen, dazwischen liegen je mindestens zwei Paper-Sektionen.
  • CTA-Dichte: Hero (1, Formular), Faq mit-cta (2) — plus FinalCta der Hülle als Schluss-Aktion und StickyCta leiste unter lg, wie von der Landing-Regel verlangt.
  • logoWall, valueProp, statsBand, testimonial nehmen Inhalts-Props von der Seite an; Faq läuft mit fester Variante (keine Inhalts-Props deklariert).

Partitur

NrSektion · Variante · FlächeContainer (Soll)Mobil · CTA
01Hero CtaFormular · split · nachtDefaultMobil: Satz vor Formular · CTA: 1
02LogoWall · reihe · paperDefaultMobil: — · CTA: —
03ValueProp · stapel „Nutzen“ · paperDefaultMobil: Satz vor Bild · CTA: —
04StatsBand · steg · nachtDefaultMobil: — · CTA: —
05TestimonialsFeatured · split „Proof“ · paperDefaultMobil: — · CTA: —
06Faq · mit-cta · paperDefaultMobil: — · CTA: 2
07FinalCta · band · paperDefaultAus der Hülle · Mobil: — · CTA: 3
08StickyCta · leiste · paperDefaultAus der Hülle · Mobil: fixed bottom-0 z 50, lg:hidden · CTA: —

Live

/vorlagen/landingpage