Voice Recognition Feature Card

<div class="relative overflow-hidden rounded-[28px] bg-white ring-1 ring-black/5 shadow-[0_10px_40px_rgba(0,0,0,0.06)]">
  <div class="pointer-events-none absolute inset-0">
    <div class="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-violet-200/20 blur-3xl"></div>
    <div class="absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-indigo-200/20 blur-3xl"></div>
  </div>
  <div class="relative p-6 sm:p-10">
    <div class="max-w-2xl">
      <h2 class="text-[28px] sm:text-[32px] tracking-tight font-semibold text-zinc-900">Only Listens to Your Voice</h2>
      <p class="mt-3 text-[15px] sm:text-[16px] leading-7 text-zinc-600">
        Train Whisper to recognise your voice by reading a short paragraph during set‑up. This guarantees that suggestions generated are specifically relevant to you and your context.
      </p>
    </div>
    <div class="relative mt-8 sm:mt-10">
      <div class="relative mx-auto w-full max-w-3xl">
        <div class="relative mx-auto h-[300px] sm:h-[340px] w-[300px] sm:w-[340px]">
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="absolute h-[95%] w-[95%] rounded-full ring-1 ring-violet-300/30" style="aspect-ratio: 1/1;"></div>
            <div class="absolute h-[78%] w-[78%] rounded-full ring-1 ring-violet-300/30" style="aspect-ratio: 1/1;"></div>
            <div class="absolute h-[60%] w-[60%] rounded-full ring-1 ring-violet-300/30" style="aspect-ratio: 1/1;"></div>
            <div class="absolute h-[42%] w-[42%] rounded-full ring-1 ring-violet-300/30" style="aspect-ratio: 1/1;"></div>
            <div class="absolute h-[62%] w-[62%] rounded-full bg-gradient-to-b from-violet-50 to-white/0" style="aspect-ratio: 1/1;"></div>
          </div>
          <button class="absolute left-1/2 -translate-x-1/2 -top-4 z-20 h-12 w-12 rounded-full bg-gradient-to-b from-violet-500 to-violet-600 shadow-[0_8px_24px_rgba(99,102,241,0.45)] ring-4 ring-white flex items-center justify-center">
            <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-5 w-5 text-white">
              <path d="M12 19v3"></path>
              <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
              <rect x="9" y="2" width="6" height="13" rx="3"></rect>
            </svg>
          </button>
          <div class="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2">
            <div class="flex flex-col items-center">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1b8161f0-0419-4b06-bbd3-35b4b0a75953_320w.jpg" alt="Your avatar" class="h-11 w-11 rounded-full object-cover ring-3 ring-white shadow-md">
              <span class="mt-2 inline-flex items-center rounded-full bg-violet-600 px-3 py-1 text-xs font-medium text-white shadow-sm">You</span>
            </div>
          </div>
          <div class="absolute left-[8%] top-[32%] flex flex-col items-center">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4683bd83-1a75-40a4-90b8-ad07cfd2107d_320w.jpg" alt="Antony" class="h-9 w-9 rounded-full object-cover ring-2 ring-white shadow">
            <span class="mt-1 rounded-full bg-white px-2 py-0.5 text-xs text-zinc-700 ring-1 ring-black/5 shadow-sm">Antony</span>
          </div>
          <div class="absolute right-[8%] top-[40%] flex flex-col items-center">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a67f11d7-a9b3-4769-b88d-23b3e95fc460_320w.jpg" alt="Claire" class="h-9 w-9 rounded-full object-cover ring-2 ring-white shadow">
            <span class="mt-1 rounded-full bg-white px-2 py-0.5 text-xs text-zinc-700 ring-1 ring-black/5 shadow-sm">Claire</span>
          </div>
          <div class="absolute left-[12%] bottom-[24%] flex flex-col items-center">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3d73a0ec-fe36-4583-a37e-c2d563105854_320w.jpg" alt="Bet" class="h-9 w-9 rounded-full object-cover ring-2 ring-white shadow">
            <span class="mt-1 rounded-full bg-white px-2 py-0.5 text-xs text-zinc-700 ring-1 ring-black/5 shadow-sm">Bet</span>
          </div>
          <div class="absolute left-[28%] bottom-[8%] flex flex-col items-center">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/13dfbd7f-5433-4086-961e-44288aa45c8b_320w.jpg" alt="Nina" class="h-9 w-9 rounded-full object-cover ring-2 ring-white shadow">
            <span class="mt-1 rounded-full bg-white px-2 py-0.5 text-xs text-zinc-700 ring-1 ring-black/5 shadow-sm">Nina</span>
          </div>
          <div class="absolute right-[28%] bottom-[8%] flex flex-col items-center">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/42f28707-bfb5-4c0b-87c0-0c9221804831_320w.jpg" alt="Paul" class="h-9 w-9 rounded-full object-cover ring-2 ring-white shadow">
            <span class="mt-1 rounded-full bg-white px-2 py-0.5 text-xs text-zinc-700 ring-1 ring-black/5 shadow-sm">Paul</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>