Hero Sections für React und Tailwind

Der erste Bildschirm einer Seite in sechzehn Aufbauten, vom mittigen Statement bis zu Video, App, Reitern, Formular und Terminal.

17 Variants

Kategorie wechseln

Welcher Hero zu deiner Seite passt

Der Hero ist der erste Bildschirm, den Besucher sehen, und er hat eine Aufgabe. Er sagt, was die Seite bietet, und zeigt den nächsten Schritt. Jeder Hero hier nimmt Headline, Text, Buttons und Medien über Props, deshalb passt dieselbe Component zum SaaS-Launch, zur Zahnarztpraxis und zum Portfolio.

Nimm „Mittig“ oder „Geteilt“, wenn die Botschaft die Seite trägt. „Geteilt“ stellt Screenshot oder Foto neben den Text und passt zu Produkten, die etwas zu zeigen haben. „Mit E-Mail-Feld“ eignet sich für Warteliste und Newsletter, „Mit Zahlen“ und „Mit Logos“ liefern sofort Belege, „Mit Terminal“ spricht Entwickler an. „Bild im Hintergrund“ und „Mit Video“ wirken bei Orten und Events, wo das Bild verkauft.

Halte die Headline unter zehn Wörtern und den Lead auf dem Handy unter zwei Zeilen. Ein Haupt-Button genügt, höchstens einer daneben. Jede Variante hat ein eigenes Handy-Layout, prüf die Vorschau deshalb in Handybreite, dort ändert sich die Reihenfolge von Bild und Text.

Mittig

Eine Achse, weiches Licht von oben, darunter steigt das Produkt auf.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="centered" title="…" description="…" primaryAction={{ label, href }} media={<BrowserFrame>…</BrowserFrame>} />

Source

Geteilt

Text links, Bild rechts. Auf dem Telefon steht der Text zuerst.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="split" title="…" description="…" primaryAction={{ label, href }} media={…} />

Source

Links mit großer Zeile

Eine sehr große Zeile, darunter Text und Knöpfe auf einer Haarlinie, dann das Produkt.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="left" title="…" description="…" primaryAction={…} media={…} />

Source

Mit E-Mail-Feld

Anmeldung direkt im ersten Bildschirm, mit Prüfung, Dankeszeile und Stimmen.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-form" title="…" form={{ buttonLabel: "Get early access" }} proof={{ avatars, text, rating }} />

Source

Mit Video

Ein Standbild mit Abspielknopf öffnet den Film im Dialog. Escape oder ein Klick daneben schließt ihn.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-video" title="…" video={{ poster: <img …/>, src: "/tour.mp4", caption: "Watch the tour", duration: "1:30" }} />

Source

App mit Telefon

Ein Telefon mit kleinen schwebenden Karten, für mobile Produkte.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="app" title="…" media={<PhoneFrame>…</PhoneFrame>} cards={[{ icon, title, value }]} />

Source

Mit Logos

Ein mittiges Statement über einem Band aus Kundenlogos mit Haarlinien.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-logos" title="…" logosLabel="Trusted by…" logos={[<Logo />, …]} />

Source

Mit Zahlen

Überschrift und Text nebeneinander, darunter vier Zahlen im Haarlinien-Raster.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-stats" title="…" stats={[{ value: "98%", label: "…" }]} />

Source

Mit Stimme

Ein hohes Bild, über dessen Kante ein Kundenzitat liegt.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-testimonial" title="…" media={<img …/>} testimonial={{ quote, name, role, avatar, rating }} />

Source

Bild im Hintergrund

Ein Motiv füllt die ganze Fläche, der Text steht unten links auf einem weichen Verlauf.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="image-background" background={<img className="size-full object-cover" …/>} title="…" />

Source

Produkt-Reiter

Reiter unter der Überschrift wechseln das Bild. Pfeiltasten springen zwischen ihnen.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="product-tabs" title="…" tabs={[{ id, label, icon, media }]} />

Source

Wechselndes Wort

Das letzte Wort der Überschrift wechselt. Screenreader hören jede Möglichkeit einmal.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="rotating-word" title="Websites for" rotatingWords={["law firms", "cafés", "studios"]} />

Source

Farbfeld

Ein langsames Lichtfeld in der Akzentfarbe, gefasst in einer Tafel.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="gradient-mesh" title="…" description="…" primaryAction={…} />

Source

Minimal

Nur Schrift, ein leiser Link und eine Reihe Fakten auf einer Haarlinie. Für Studios, Kanzleien und Portfolios.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="minimal" eyebrow={<Badge dot>…</Badge>} title="…" meta={[{ label, value }]} />

Source

Editorial

Eine Kopfleiste wie im Magazin, eine übergroße Zeile und ein breites Bild in ruhigem Raster.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="editorial" meta={[{ label, value }]} title="…" media={<img …/>} />

Source

Mit Terminal

Ein Befehl zum Kopieren und ein Terminal, das seine Ausgabe tippt, sobald es sichtbar wird.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-code" command="npx northwind init" terminal={{ title, lines: [{ kind: "command", text }] }} />

Source

Karussell

Folien mit eigenem Foto, eigener Headline und eigenen Aktionen. Der Balken der aktiven Folie füllt sich als ihr Zeitgeber, das Foto setzt sich langsam, und die Diashow hält bei Zeiger auf den Bedienelementen, bei Fokus und auf Pause. Wischen auf dem Telefon, Pfeiltasten an der Folienwahl.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/hero

Bringt mit utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="carousel" interval={7000} slides={[{ label, title, description, primaryAction, background: <img className="size-full object-cover" … /> }]} />

Source

Details

Was Auftakt mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 17
Version: 1.0.2 · seit 1.0.0
Datei: components/ui/hero.tsx
Bringt mit: utilskitbutton iconmotionnumber-ticker rotating-words
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 16 eigene Texte
Studio: Alle 17 Variants bearbeitbar
In Sammlungen: SaaS-Landingpage Lokales Geschäft
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle HeroProps aus components/ui/hero.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
HeroVariant
centeredsplitleftwith-formwith-videoappwith-logoswith-statswith-testimonialimage-backgroundproduct-tabsrotating-wordgradient-meshminimaleditorialwith-codecarousel
announcementoptional
{ tag?: string; label: string; href: string }
Small announcement above the title, links somewhere
eyebrowoptional
React.ReactNode
Short line above the title (minimal, editorial and others without announcement)
titlePflicht
React.ReactNode
The headline. Pass a node to highlight a part, e.g. <span className="kit-accent-text">…</span>
descriptionoptional
React.ReactNode
primaryActionoptional
HeroAction
secondaryActionoptional
HeroAction
notesoptional
string[]
Short reassurances under the buttons, each with a check mark
mediaoptional
React.ReactNode
Image, screenshot, frame or any component
logosoptional
React.ReactNode[]
with-logos: customer logos
logosLabeloptional
string
statsoptional
HeroStat[]
with-stats
testimonialoptional
HeroTestimonial
with-testimonial
tabsoptional
HeroTab[]
product-tabs: each tab swaps the media
formoptional
HeroForm
with-form: email sign-up
proofoptional
HeroProof
with-form: avatars and a line of social proof
videooptional
HeroVideo
with-video: poster and dialog player
cardsoptional
HeroFloatingCard[]
app: small cards floating around the phone
rotatingWordsoptional
string[]
rotating-word: words that take turns at the end of the title
backgroundoptional
React.ReactNode
image-background: an image or drawn motif that fills the section
terminaloptional
{ title?: string; lines: HeroTerminalLine[] }
with-code: the terminal on the right
commandoptional
string
with-code: a command with a copy button
metaoptional
HeroMeta[]
minimal and editorial: small facts in a row
slidesoptional
HeroSlide[]
carousel: the slides. Without it the hero props make a single slide with `background`.
intervaloptional
number
carousel: milliseconds per slide, 0 turns autoplay off. Default 7000.

Eingebaute Texte

Diese Texte schreibt Auftakt selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 16 Texte anzeigen

Schlüssel	Englisch	Deutsch
email	Englisch Email address	Deutsch E-Mail-Adresse
emailPlaceholder	Englisch you@company.com	Deutsch du@firma.de
invalid	Englisch Please enter a valid email address.	Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
thanks	Englisch Thanks. Check your inbox to confirm.	Deutsch Danke. Bitte bestätige die Mail in deinem Postfach.
play	Englisch Play video	Deutsch Video abspielen
close	Englisch Close	Deutsch Schließen
copy	Englisch Copy command	Deutsch Befehl kopieren
copied	Englisch Copied	Deutsch Kopiert
views	Englisch Product views	Deutsch Produktansichten
rating	Englisch out of 5 stars	Deutsch von 5 Sternen
slides	Englisch Slides	Deutsch Folien
slide	Englisch Slide {n} of {total}	Deutsch Folie {n} von {total}
previous	Englisch Previous slide	Deutsch Vorherige Folie
next	Englisch Next slide	Deutsch Nächste Folie
pause	Englisch Pause slideshow	Deutsch Diashow anhalten
playSlides	Englisch Play slideshow	Deutsch Diashow abspielen

Aus dem Quellcode der Component abgeleitet.

Auftakt reagiert selbst auf die Tasten Pfeil links, Pfeil rechts, Pos1, Ende und Leertaste.
Baut auf dem nativen dialog-Element auf. Der Browser hält den Fokus im Fenster und schließt es mit Escape.
Setzt aria-controls, aria-describedby, aria-haspopup, aria-invalid, aria-label, aria-labelledby, aria-live, aria-roledescription und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen img, status, tab, tablist und tabpanel.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 18 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Auftakt?

Mit aiw add @ai-website/hero. Der Befehl legt die Datei components/ui/hero.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, motion, number-ticker und rotating-words. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Auftakt?

17 Varianten, Mittig, Geteilt, Links mit großer Zeile, Mit E-Mail-Feld, Mit Video, App mit Telefon, Mit Logos, Mit Zahlen, Mit Stimme, Bild im Hintergrund, Produkt-Reiter, Wechselndes Wort, Farbfeld, Minimal, Editorial, Mit Terminal und Karussell. Du wählst sie mit der Prop variant, zum Beispiel variant="split".

Kann ich die Texte von Auftakt übersetzen?

Ja. Auftakt bringt 16 eigene Texte auf Deutsch und Englisch mit, etwa „E-Mail-Adresse“, „du@firma.de“ und „Bitte gib eine gültige E-Mail-Adresse ein.“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Auftakt einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Auftakt mit aiw_components und installieren sie mit aiw_add @ai-website/hero. Nenn im Prompt die Variante, etwa variant="centered", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Auftakt ohne Code anpassen?

Ja, im Studio. Alle 17 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Hero-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Hero stehen.

Welcher Hero zu deiner Seite passt

Auftakt

Mittig

Geteilt

Links mit großer Zeile

Mit E-Mail-Feld

Mit Video

App mit Telefon

Mit Logos

Mit Zahlen

Mit Stimme

Bild im Hintergrund

Produkt-Reiter

Wechselndes Wort

Farbfeld

Minimal

Editorial

Mit Terminal

Karussell

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Teil dieser Sammlungen

Teil dieser Sammlungen

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit