Design System
Playground Zur Vorlage

LayoutsPricing

Layout · Seite · unique

Pricing

layouts/Pricing.astro

Seiten-Layout für Preise: BasisStandard-Hülle mit Text-Hero, sechs Sektionen, ein Nacht-Wechsel bei TestimonialsGrid, FinalCta und StickyCta zusammen im cta-Slot.

Regeln

  • Nutzt BasisStandard — Header, Hero-Slot, Fuß kommen aus der Hülle; der cta-Slot trägt FinalCta band und StickyCta preis zusammen (zwei Elemente im selben Slot).
  • Nur TestimonialsGrid ist Nacht in der Mitte; der Hero (TextOnly, fest) liegt ohnehin auf Nacht — dazwischen liegen drei Paper-Sektionen.
  • CTA-Dichte: PricingTiers (1), FinalCta (2) — plus StickyCta preis als Sticky-CTA unter lg, wie von der Pricing-Regel verlangt.
  • hero, testimonials nehmen Inhalts-Props von der Seite an; PricingTiers, PricingVergleich, TrustLeiste, Faq, FinalCta, StickyCta laufen mit fester Variante (keine Inhalts-Props deklariert).

Partitur

NrSektion · Variante · FlächeContainer (Soll)Mobil · CTA
01Hero TextOnly „Preise“ · fest · nachtDefaultMobil: Satz vor Bild · CTA: —
02PricingTiers · toggle-oben · paperDefaultMobil: — · CTA: 1
03PricingVergleich · sticky · paperDefaultMobil: gestapelt · CTA: —
04TrustLeiste · haarlinie · paperDefaultMobil: — · CTA: —
05TestimonialsGrid · zitat · nachtDefaultMobil: — · CTA: —
06Faq · zwei-spalten · paperDefaultMobil: — · CTA: —
07FinalCta · band · paperDefaultMobil: — · CTA: 2
08StickyCta · preis · paperDefaultMobil: lg:hidden bottom-0 z 50 · CTA: —

Live

/vorlagen/pricing