Der Hero ist der erste Eindruck deiner Seite. Er entscheidet in wenigen Sekunden, ob Besucher bleiben. Dieser Leitfaden zeigt, wie du mit React und Tailwind CSS einen Hero baust, der schnell lädt, klar kommuniziert und mit ruhiger Bewegung überzeugt.
Was ein guter Hero leisten muss
Ein Hero beantwortet drei Fragen sofort: Worum geht es, warum ist es relevant und was ist der nächste Schritt. Alles andere ist Beiwerk.
Halte den Textblock kurz. Eine prägnante Überschrift, ein bis zwei Sätze Erklärung und ein klarer Call-to-Action reichen. Zu viele Optionen lähmen die Entscheidung.
Aufbau mit Tailwind
Nutze ein zentriertes Grid oder Flexbox mit großzügigem Abstand. Mit Klassen wie flex, flex-col, items-center und gap-6 stellst du den Inhalt schnell auf. Für responsive Schriftgrößen eignet sich clamp über eine style-Angabe, damit die Headline auf jedem Gerät gut sitzt.
Setze auf eine klare Typo-Hierarchie: eine große Display-Schrift für die Headline, eine ruhige Body-Schrift für den Fließtext. Kontrast zwischen beiden schafft Ordnung.
Bilder und Performance
Wenn du ein Hintergrundbild nutzt, ist es meist das größte Element im ersten Viewport und damit entscheidend für den Largest Contentful Paint. Liefere es in modernen Formaten wie WebP, in passender Größe und mit hoher Priorität aus.
Dekorative Bilder bekommen ein leeres alt-Attribut, damit Screenreader sie überspringen. Inhaltsbilder, die etwas aussagen, bekommen eine kurze, treffende Beschreibung.
Dezente Animation mit framer-motion
Bewegung sollte den Blick führen, nicht ablenken. Ein sanftes Einblenden der Headline beim Laden wirkt hochwertig, solange es die Sichtbarkeit nicht verzögert. Animiere für einen schnellen ersten Frame nur Transform-Werte und halte die Deckkraft bei eins.
Respektiere prefers-reduced-motion. Mit useReducedMotion aus framer-motion bietest du eine ruhige Variante für Menschen, die Bewegung reduziert haben wollen.
Fertige Vorlagen als Startpunkt
Statt bei null zu beginnen, kannst du fertige Hero-Sections übernehmen, den Code kopieren und an deine Marke anpassen. Das spart Zeit und liefert erprobte Struktur und Animation.