Hero

Layout & Hero

Fullscreen Hero-Sektion mit Hintergrundbild, Overlay, optionalem Logo und Call-to-Action.

Live Demo

Pizzeria Bella Napoli

Echte italienische Küche seit 1998

Kontakt aufnehmen Speisekarte

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`backgroundImage`	`string`	Ja	—	URL des Hintergrundbilds
`title`	`string`	Ja	—	Hauptüberschrift
`subtitle`	`string`	Nein	—	Untertitel
`overlayColor`	`string`	Nein	`'#000000'`	Farbe des Overlays
`overlayOpacity`	`number`	Nein	`0.6`	Deckkraft des Overlays (0–1)
`logo`	`string`	Nein	—	URL des Logos
`minHeight`	`string`	Nein	`'100vh'`	Mindesthöhe der Sektion
`children`	`ReactNode`	Nein	—	CTA-Buttons oder andere Inhalte
`className`	`string`	Nein	—	Zusätzliche CSS-Klassen

Code-Beispiel

<Hero
  backgroundImage="/images/hero.jpg"
  title="Pizzeria Bella Napoli"
  subtitle="Echte italienische Küche seit 1998"
  overlayOpacity={0.55}
  logo="/images/logo.png"
>
  <a href="#kontakt" className="bg-white text-gray-900 px-6 py-3 rounded-lg font-medium">
    Kontakt
  </a>
</Hero>