CTA-Band

Warmes Handlungsband am Seitenende mit Tint-Verlauf, Überschrift, optionaler Erläuterung und einer Aktion.

Live-Beispiel

Bereit für Dezember?

Kopiere den Plan und passe nur die Ausnahmen an – Feiertage, Urlaub und bekannte Ausfälle.

Vorschau

Desktop, Tablet und Mobil über den Umschalter in der Kopfzeile. Unterhalb von 768 px greifen die echten Media-Queries im Rahmen.

Code

Der Block bringt keine Datenlogik mit; Inhalte kommen über Props. Links lassen sich über renderLink an den Router der App anschließen.

cta-band.tsxtsx

import { CtaBand } from '@lukasfend/ui/blocks/marketing';
import { Button } from '@lukasfend/ui/components/button';

export function Abschluss() {
  return (
    <CtaBand
      title="Bereit für Dezember?"
      description="Kopiere den Plan und passe nur die Ausnahmen an."
      action={<Button render={<a href="#start" />}>Plan kopieren</Button>}
    />
  );
}