Hero
Einstiegsfläche mit Eyebrow, Überschrift, Text, Aktionen und eigener geometrischer SVG-Illustration. Variante band für Navy-Bänder, plain für helle Karten.
Live-Beispiel
Neu: Automatische Dienstplanung
Dienste planen, ohne Chaos.
Der Plan für nächste Woche ist zu 94 % gefüllt. Noch zwölf Dienste sind offen, drei davon am Wochenende.
Für Stationen ab zehn Personen
Ein Plan, den alle verstehen.
Wünsche, Tausche und Ausfälle laufen an einem Ort zusammen. Das Team sieht immer den aktuellen Stand.
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.
import { Hero } from '@lukasfend/ui/blocks/marketing';
import { Button } from '@lukasfend/ui/components/button';
export function Startseite() {
return (
<Hero
eyebrow="Neu: Automatische Dienstplanung"
title="Dienste planen, ohne Chaos."
description="Der Plan für nächste Woche ist zu 94 % gefüllt."
actions={<Button render={<a href="#start" />}>Kostenlos starten</Button>}
/>
);
}