Voice-Enabled Prompt Bar Hero Section

<div class="max-w-3xl mx-auto text-center">
            <span class="text-xs uppercase tracking-wider text-blue-300/90">New: Hands‑free automations</span>
            <h1 class="mt-3 text-4xl sm:text-5xl lg:text-6xl leading-tight tracking-tight" style="font-weight: 600">
              Ask. Act. Automate your system.
            </h1>
            <p class="mt-5 text-lg text-gray-300 max-w-xl mx-auto">
              A fast, privacy‑minded assistant that controls apps, settings, and files—by voice or text.
            </p>

            <!-- Prompt -->
            <div class="max-w-2xl mt-8 mr-auto ml-auto">
              <div class="bg-black/60 border-white/10 border rounded-2xl pt-2 pr-2 pb-2 pl-2 shadow-2xl backdrop-blur">
                <div class="flex items-center gap-2 p-2 rounded-xl bg-white/5 border border-white/10">
                  <button id="mic-btn" type="button" class="inline-flex items-center justify-center h-9 w-9 rounded-lg bg-black/40 border border-white/15 hover:border-white/25 transition" aria-pressed="false" aria-label="Toggle voice">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mic" class="lucide lucide-mic w-[18px] h-[18px]"><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>
                  <input id="prompt" type="text" placeholder="Ask ArcOS to do something…" class="flex-1 bg-transparent outline-none text-sm placeholder:text-gray-500 px-1">
                  <div class="hidden sm:flex items-center gap-2">
                    <span class="text-[10px] text-gray-400 px-1.5 py-1 rounded-md bg-white/5 border border-white/10">⌘</span>
                    <span class="text-[10px] text-gray-400 px-1.5 py-1 rounded-md bg-white/5 border border-white/10">K</span>
                  </div>
                  <button id="run-btn" type="button" class="inline-flex items-center gap-2 px-3 h-9 rounded-lg bg-blue-400 text-black hover:bg-blue-300 transition">
                    Run
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                  </button>
                </div>
                <div class="px-2 pb-2">
                  <div id="listen-indicator" class="hidden mt-2 inline-flex items-center gap-2 text-xs text-blue-300 px-2 py-1 rounded-md bg-blue-500/10 border border-blue-500/20">
                    <span class="h-1.5 w-1.5 rounded-full bg-blue-400 animate-pulse"></span>
                    Listening…
                  </div>
                  <div class="mt-2 flex flex-wrap gap-2">
                    <button data-suggest="Turn on Do Not Disturb until 6 PM" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">DND until 6 PM</button>
                    <button data-suggest="Open Figma and Slack side by side" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">Arrange: Figma + Slack</button>
                    <button data-suggest="Find PDF invoices from last month" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">Find invoices</button>
                    <button data-suggest="Start a 25‑minute focus timer" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">Focus 25m</button>
                  </div>
                  <p class="mt-2 text-[11px] text-gray-500">Tip: Hold Space to talk</p>
                </div>
              </div>
            </div>

            <!-- Social proof -->
            <div class="mt-8 flex items-center gap-6 justify-center">
              <div class="flex -space-x-2">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/52f90c3d-9f64-4db9-997b-8765ea3ff941_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black object-cover">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cb2b351a-aabb-4336-a040-dccaed5418b7_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black object-cover">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f7f6feef-fd3e-4901-bce6-7271aa74dc87_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black object-cover">
                <div class="w-8 h-8 rounded-full border-2 border-black bg-blue-400/90 flex items-center justify-center text-black text-[10px]">
                  2k+
                </div>
              </div>
              <div class="">
                <p class="text-sm text-gray-100">2,000+ users automated their day</p>
                <p class="text-sm text-gray-400">Private, fast, and reliable</p>
              </div>
            </div>
          </div>