testimonialcardmetricsresultsstatisticsdark-themeglassmorphism

Testimonial Card with Metrics

Карточка отзыва с метриками: отображает ключевые результаты и показатели производительности в выделенном блоке.

Prompt

<div class="flex flex-col rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-md transition hover:border-white/20 max-w-[500px]">
  <div class="mb-6 flex items-center justify-between">
    <div class="flex items-center gap-4">
      <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?fit=crop&w=80&q=80" alt="" class="h-12 w-12 rounded-full object-cover">
      <div class="">
        <p class="text-sm font-semibold uppercase tracking-wide text-white">Serena Cardenas</p>
        <p class="text-xs uppercase text-white/60">Design Ops · TidalWave Music</p>
      </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-white/70">
      <path d="M9 18V5l12-2v13"></path>
      <circle cx="6" cy="18" r="3"></circle>
      <circle cx="18" cy="16" r="3"></circle>
    </svg>
  </div>
  <p class="leading-snug text-lg font-medium mb-6 text-white">
    "Animations feel organic, copy is on point, and accessibility is baked in from day one. Exactly what we needed for our streaming platform."
  </p>
  <div class="mb-6 rounded-lg bg-white/5 p-4 border border-white/10">
    <p class="text-sm text-white/80 mb-2 font-medium">Key Results:</p>
    <ul class="text-sm text-white/70 space-y-1">
      <li>• 127% increase in user engagement</li>
      <li>• 43% reduction in support tickets</li>
      <li>• 98% accessibility compliance score</li>
    </ul>
  </div>
  <div class="mt-auto pt-4 border-t border-white/10">
    <div class="flex items-center gap-4 text-xs text-white/60">
      <span class="flex items-center gap-1">
        5.0/5 Rating
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
        </svg>
      </span>
      <span>Los Angeles, CA</span>
    </div>
  </div>
</div>

All Prompts