Testimonial

Kundenzitat mit Autor-Information - rein HTML, kein JavaScript.

Component HTML

<div class="max-w-2xl mx-auto p-8 bg-white rounded-lg shadow-lg border border-gray-200">
  <div class="mb-6">
    <svg class="w-12 h-12 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
    </svg>
  </div>

  <blockquote class="text-xl text-gray-700 mb-6 leading-relaxed">
    {{quote}}
  </blockquote>

  <div wm:if="showImage" class="flex items-center gap-4">
    <img
      src="{{authorImage}}"
      alt="{{authorName}}"
      class="w-16 h-16 rounded-full object-cover"
    />
    <div>
      <div class="font-semibold text-gray-900">{{authorName}}</div>
      <div class="text-sm text-gray-600">{{authorTitle}}</div>
    </div>
  </div>

  <div wm:if="!showImage">
    <div class="font-semibold text-gray-900">{{authorName}}</div>
    <div class="text-sm text-gray-600">{{authorTitle}}</div>
  </div>
</div>

Features

• Rein statisch: Keine Islands, kein JavaScript
• Responsive: Funktioniert auf allen Bildschirmgrößen
• Conditional: wm:if für optionales Autor-Bild
• Semantic HTML: <blockquote> für Zitate
• Tailwind Styling: Utility-first CSS

Verwendung

Perfekt für:

• Landing Pages
• About-Seiten
• Produkt-Reviews
• Case Studies