Beispiele

Personal-Brand-Hero (dunkles Theme entfaltet die Wirkung)

Struktur schafftFreiheit.

Ich helfe dir, deine Prozesse, Systeme und Abläufe so aufzubauen, dass dein Unternehmen funktioniert - auch ohne dich.

Erhalte Klarheit, wo Zeit und Geld verloren gehen
Nutze Automatisierungen, die Stunden zurückgeben

Eigenschaften

Prop	Typ	Default	Builder-Label
title *	string	—	Titel (weiß)
titelAkzent	string	""	Titel-Zeile 2 (Akzentfarbe)
subtitle	string	""	Untertitel
points	array	[]	Häkchen-Punkte
ctaLabel	string	""	CTA-Beschriftung
ctaUrl	string	""	CTA-Ziel
imageUrl	string	""	Foto-URL (https)
tone	string: dark \| gray \| light	"dark"	Band-Ton
spacing	string: none \| sm \| md \| lg \| xl	"none"	Eigenabstand

* Pflicht-Prop

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--band-surface`	`transparent`
`--color-text-default`	`var(--band-text, inherit)`
`--color-text-muted`	`var(--band-muted, inherit)`
`--band-text`	`var(--color-band-dark-text)`
`--band-muted`	`var(--color-band-dark-muted)`

Genutzte Design-Tokens

border.hairlinecolor.action.on-secondarycolor.action.primarycolor.action.secondarycolor.action.secondary-hovercolor.band.darkcolor.band.dark-mutedcolor.band.dark-textcolor.band.graycolor.band.gray-mutedcolor.band.gray-textcolor.border.strongcolor.text.defaultcolor.text.mutedcontainer.mdfont.family.defaultleading.looseleading.tightradius.controlradius.surfacesize.12size.4size.6size.8text.6xltext.lgtext.mdtext.readingweight.mediumweight.semibold

LLM-Notizen

section.hero-split

Geteilter Hero-Block: links zweifarbiger Titel + Häkchenliste + CTA, rechts Bild. Ton-neutral — die Instanz wählt den Bandton.

Wann nutzen

Als erster Block einer Landing-/Personal-Page, wenn ein Foto/Produktbild die Hälfte tragen soll.
Für zentrierte Produkt-Heros stattdessen section.hero-centered.

Wichtige Props

tone: dark | gray | light — NIE Farben direkt setzen; das Theme liefert die Bandwerte (color.band.*).
title + titleAccent (zweite Zeile in Akzentfarbe), subtitle, points (Häkchenliste), ctaLabel/ctaUrl, imageUrl.

Beispiel-Node


{
  "definition": "section.hero-split",
  "props": {
    "tone": "light",
    "title": "Struktur schafft",
    "titleAccent": "Freiheit.",
    "points": ["Klarheit über Abläufe", "Team arbeitet eigenständig"],
    "ctaLabel": "Erstgespräch vereinbaren",
    "ctaUrl": "/termin/",
    "imageUrl": "https://…/foto.jpg"
  }
}