Hero Section

Hero-Bereich mit Hintergrundbild und CTA-Buttons - rein HTML, kein JavaScript.

Component HTML

<div class="hero relative overflow-hidden bg-gray-900 min-h-screen flex items-center">
  <!-- Background Image -->
  <div wm:if="backgroundImage"
    class="absolute inset-0 bg-cover bg-center opacity-40"
    style="background-image: url('{{backgroundImage}}');"
  ></div>

  <!-- Content -->
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 w-full">
    <div class="text-center">
      <!-- Title -->
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 animate-fade-in">
        {{title}}
      </h1>

      <!-- Subtitle -->
      <p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto animate-fade-in-delay">
        {{subtitle}}
      </p>

      <!-- CTA Buttons -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12 animate-fade-in-delay-2">
        <a
          href="{{primaryCtaUrl}}"
          class="inline-block px-8 py-4 bg-primary text-white text-lg font-semibold rounded-lg hover:bg-primary-dark transition-all duration-200 transform hover:scale-105"
        >
          {{primaryCtaText}}
        </a>
        <a
          href="{{secondaryCtaUrl}}"
          class="inline-block px-8 py-4 bg-white text-gray-900 text-lg font-semibold rounded-lg hover:bg-gray-100 transition-all duration-200 transform hover:scale-105"
        >
          {{secondaryCtaText}}
        </a>
      </div>
    </div>
  </div>

  <!-- Overlay -->
  <div class="absolute inset-0 bg-gradient-to-b from-black/50 to-black/70"></div>

  <!-- Scroll Indicator -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
</div>

<style>
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.6s ease-out;
  }

  .animate-fade-in-delay {
    animation: fade-in 0.6s ease-out 0.2s both;
  }

  .animate-fade-in-delay-2 {
    animation: fade-in 0.6s ease-out 0.4s both;
  }
</style>

Features

• Rein statisch: Keine Islands, kein JavaScript
• Responsive: Fullscreen auf allen Geräten
• CSS Animationen: Fade-in Effekte mit gestaffelten Delays
• Conditional: wm:if für optionales Hintergrundbild
• Design Tokens: Verwendet bg-primary für konsistente Farben
• Tailwind Styling: Utility-first CSS

Verwendung

Perfekt für:

• Landing Pages
• Produkt-Launches
• Event-Seiten
• Homepage Hero