Interactive AI Speech Recognition Card

<div
  class="group flex flex-col transition-all duration-300 hover:scale-[1.02] text-center w-7xl h-[460px] rounded-3xl pt-8 pr-8 pb-8 pl-8 relative items-center"
  style="background: linear-gradient(135deg, rgba(15, 15, 15, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%); border: 1px solid rgba(139, 92, 246, 0.2); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.1) inset; backdrop-filter: blur(12px);"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; section:nth-of-type(2) &gt; div:nth-of-type(2) &gt; div:nth-of-type(4) &gt; div:nth-of-type(3) &gt; div:nth-of-type(1) &gt; div:nth-of-type(2)">
  <!-- Grain texture overlay -->
  <div class="opacity-[0.15] rounded-3xl absolute inset-0 pointer-events-none"
    style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0); background-size: 24px 24px;">
  </div>

  <!-- Animated gradient glow -->
  <div
    class="absolute inset-0 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
    style="background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(139, 92, 246, 0.08), transparent 40%);">
  </div>

  <!-- Purple badge with mic icon -->
  <div
    class="flex transition-all duration-300 group-hover:scale-110 group-hover:rotate-3 w-14 h-14 rounded-2xl mb-6 relative items-center justify-center"
    style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5), 0 0 60px rgba(124, 58, 237, 0.2);">
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic text-white">
      <path d="M12 1a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3Z" class=""></path>
      <path d="M19 10a7 7 0 0 1-14 0" class=""></path>
      <path d="M12 19v4" class=""></path>
    </svg>
  </div>

  <!-- Title -->
  <h3 class="leading-tight z-10 text-2xl font-semibold text-white tracking-tight mb-3 relative">AI‑Speech
    Recognition</h3>

  <!-- Supporting copy -->
  <p class="leading-relaxed text-sm text-gray-400 mb-8 max-w-[280px] relative z-10">Enable voice control and
    realtime analysis across Auralith experiences</p>

  <!-- Speech Recognition UI -->
  <div class="flex-1 flex flex-col z-10 w-full relative items-center justify-center">
    <div class="w-full max-w-[300px] px-4">
      <!-- Label bubble -->
      <div class="flex mb-6 relative justify-center">
        <span class="inline-flex items-center text-xs font-semibold text-white tracking-tight bg-violet-600 rounded-full px-4 py-1.5 relative shadow-lg transition-all duration-300 group-hover:shadow-xl group-hover:shadow-violet-500/30">
            Speech Recognition
          </span>
        <span class="absolute left-1/2 -translate-x-1/2 -bottom-1 h-2 w-2 rotate-45 rounded-[2px] bg-violet-600"></span>
      </div>

      <!-- Control pill -->
      <div class="relative group/pill">
        <!-- Outer pill -->
        <div
          class="relative h-16 rounded-[28px] bg-black/70 ring-1 ring-white/10 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06),0_12px_32px_rgba(0,0,0,0.5)] transition-all duration-300 group-hover/pill:ring-violet-500/30 xl:gap-x-0">
          <!-- Inner surface -->
          <div
            class="ring-white/5 ring-1 bg-gradient-to-b from-white/5 to-black/60 rounded-[24px] absolute top-1 right-1 bottom-1 left-1 space-x-0">
          </div>

          <!-- Mic button -->
          <button class="absolute left-2 top-1/2 -translate-y-1/2 h-12 w-12 rounded-full shadow-[0_8px_24px_rgba(0,0,0,0.7)] ring-1 ring-black/70 bg-gradient-to-b from-[#1a1a1d] to-[#0d0d10] transition-all duration-300 hover:scale-105">
              <span class="absolute inset-[6px] rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1),0_0_0_8px_rgba(124,58,237,0.3)] transition-all duration-300 hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.15),0_0_0_10px_rgba(124,58,237,0.4)]" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic text-white">
                  <path d="M12 1a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3Z" class=""></path>
                  <path d="M19 10a7 7 0 0 1-14 0" class=""></path>
                  <path d="M12 19v4" class=""></path>
                </svg>
              </span>
            </button>

          <!-- Animated waveform bars -->
          <div
            class="-translate-y-1/2 flex group-hover/pill:opacity-100 transition-opacity xl:gap-y-2 opacity-60 max-w-none absolute top-1/2 left-[86px] gap-x-1 gap-y-2 items-center">
            <div class="animate-pulse bg-violet-400 w-1 h-3 rounded-full"
              style="animation-delay: 0s; animation-duration: 0.8s;">
            </div>
            <div class="animate-pulse bg-violet-400 w-1 h-3 rounded-full"
              style="animation-delay: 0s; animation-duration: 0.8s;">
            </div>
            <div class="animate-pulse bg-violet-400 w-1 h-5 rounded-full"
              style="animation-delay: 0.1s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-5 rounded-full"
              style="animation-delay: 0.1s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-4 rounded-full"
              style="animation-delay: 0.2s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-4 rounded-full"
              style="animation-delay: 0.2s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-6 rounded-full"
              style="animation-delay: 0.3s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-6 rounded-full"
              style="animation-delay: 0.3s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-6 rounded-full"
              style="animation-delay: 0.3s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-3 rounded-full"
              style="animation-delay: 0.4s; animation-duration: 0.8s;"></div>
            <div class="animate-pulse bg-violet-400 w-1 h-3 rounded-full"
              style="animation-delay: 0.4s; animation-duration: 0.8s;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>