Voice Recognition Focus Section with Mic and Avatar Ring

<div class="relative overflow-hidden ring-1 ring-black/5 shadow-[0_10px_40px_rgba(0,0,0,0.06)] bg-white rounded-[28px]">
          <!-- Subtle corner glow -->
          <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 sm:p-10 pt-6 pr-6 pb-6 pl-6">
            <!-- Heading -->
            <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>

            <!-- Voice focus visualization -->
            <div class="relative mt-8 sm:mt-10">
              <div class="relative mx-auto w-full max-w-3xl">
                <!-- Stage -->
                <div class="relative mx-auto h-[300px] sm:h-[340px] w-[300px] sm:w-[340px]">
                  <!-- Concentric perfect circles -->
                  <div class="absolute inset-0 flex items-center justify-center">
                    <!-- Outer aura -->
                    <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>
                    <!-- Soft radial fill -->
                    <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>

                  <!-- Mic button -->
                  <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" data-lucide="mic" class="lucide lucide-mic h-5 w-5 text-white"><path d="M12 19v3" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><rect x="9" y="2" width="6" height="13" rx="3" class=""></rect></svg>
                  </button>

                  <!-- Center avatar -->
                  <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">
                      
                      <!-- You tag -->
                      <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>

                  <!-- Surrounding people -->
                  <!-- Antony -->
                  <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>

                  <!-- Claire -->
                  <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>

                  <!-- Bet -->
                  <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>

                  <!-- Nina -->
                  <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>

                  <!-- Alex -->
                  

                  <!-- Paul -->
                  <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>