CTA Section

Call-to-Action Banner mit Buttons - rein HTML, kein JavaScript.

Component HTML

<div class="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg">
  <div class="max-w-4xl mx-auto px-8 py-16 text-center">
    <h2 class="text-4xl font-bold text-white mb-4">
      {{title}}
    </h2>

    <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
      {{description}}
    </p>

    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a
        href="{{primaryButtonUrl}}"
        class="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors"
      >
        {{primaryButtonText}}
      </a>

      <a wm:if="showSecondaryButton"
        href="{{secondaryButtonUrl}}"
        class="px-8 py-3 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
      >
        {{secondaryButtonText}}
      </a>
    </div>
  </div>

  <!-- Decorative elements -->
  <div class="absolute top-0 right-0 -mt-20 -mr-20 w-64 h-64 bg-white/10 rounded-full"></div>
  <div class="absolute bottom-0 left-0 -mb-32 -ml-32 w-80 h-80 bg-white/5 rounded-full"></div>
</div>

Features

• Rein statisch: Keine Islands, kein JavaScript
• Gradient Background: Moderne Farbverläufe
• Responsive Buttons: Stack auf Mobile, Side-by-Side auf Desktop
• Conditional: wm:if für optionalen zweiten Button
• Decorative Elements: Dekorative Kreise im Hintergrund
• Tailwind Styling: Utility-first CSS

Verwendung

Perfekt für:

• Landing Pages
• Newsletter Signup
• Product Launch
• Event Registrierung