Responsive SaaS Landing Hero with Navbar & CTAs

<div class="min-h-screen flex sm:px-6 lg:px-8 pt-6 pr-4 pb-6 pl-4 gap-x-6 gap-y-6 items-center justify-center">
    <div class="overflow-hidden bg-stone-50 w-full max-w-6xl border-stone-200/80 border gap-x-6 gap-y-6">
      <!-- Top Bar -->
      <header class="flex items-center justify-between px-6 sm:px-10 pt-6 sm:pt-8">
        <div class="flex items-center space-x-3">
          <div class="flex bg-stone-900 w-9 h-9 border-stone-700/70 border rounded-full items-center justify-center">
            <!-- Icon logo (20x20) - Solar Duotone Bold style -->
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-[20px] h-[20px] text-stone-50" style="stroke-width:1.5" data-icon-set="solar" data-solar="record-bold-duotone"><circle cx="12" cy="12" r="7" fill="currentColor" opacity=".5" class=""></circle><path fill="currentColor" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m0-3a7 7 0 1 0 0-14a7 7 0 0 0 0 14" clip-rule="evenodd" class=""></path></svg>
          </div>
          <div class="flex flex-col">
            <span class="text-sm font-medium tracking-tight text-stone-900 font-geist">EchoFrame</span>
            <span class="text-[11px] font text-stone-500 font-geist">Voice Intelligence Studio</span>
          </div>
        </div>
        <nav class="hidden md:flex items-center space-x-8 text-sm font-normal text-stone-500">
          <button class="hover:text-stone-900 transition-colors font-geist">
            Studio
          </button>
          <button class="hover:text-stone-900 transition-colors font-geist">
            Use Cases
          </button>
          <button class="hover:text-stone-900 transition-colors font-geist">
            Resources
          </button>
          <button class="hover:text-stone-900 transition-colors font-geist">
            Pricing
          </button>
        </nav>
        <div class="flex items-center space-x-3">
          <button class="hidden sm:inline-flex items-center px-3 py-1.5 text-xs font-medium border border-stone-300 text-stone-700 hover:border-stone-400 hover:text-stone-900 font-geist">
            Log in
          </button>
          <button class="inline-flex items-center px-4 py-2 text-xs font-medium tracking-tight bg-stone-900 text-stone-50 hover:bg-black font-geist">
            GET ACCESS
          </button>
        </div>
      </header>

      <!-- Main Content -->
      <main class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 lg:gap-10 sm:px-10 sm:pb-10 sm:pt-10 pt-6 pr-6 pb-8 pl-6 gap-x-6 gap-y-6">
        <!-- Left Column -->
        <section class="flex flex-col space-y-6 justify-between">
          <div class="sm:space-y-6 space-y-4">
            <p class="inline-flex items-center text-[11px] font-medium tracking-tight uppercase text-stone-700 bg-stone-200/80 border border-stone-300 px-3 py-1 w-max font-geist">
              <span class="w-1.5 h-1.5 bg-stone-700 mr-1.5"></span>
              Real-time voice-to-intent engine
            </p>

            <h1 class="leading-[1.05] sm:text-5xl md:text-6xl lg:text-6xl text-4xl font-normal text-stone-900 tracking-tight font-geist max-w-3xl">
              We’re EchoFrame,
              <img alt="Product waveform preview" class="inline-block align-middle sm:h-11 sm:w-20 md:h-14 md:w-24 w-16 h-9 object-cover ring-stone-300 ring-1 rounded-lg mr-2 ml-2" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dbf5085e-0341-4243-aa8f-73a531c46290_320w.webp">
              turning every spoken moment into
              <img alt="Team collaboration preview" class="inline-block align-middle sm:h-11 sm:w-11 md:h-14 md:w-14 w-9 h-9 object-cover rounded-lg ring-stone-300 ring-1 mr-2 ml-2" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a2cdd22f-4895-4c8c-b054-f19b899606b1_320w.webp">
              searchable, living insight.
            </h1>

            <p class="sm:text-base text-sm font-normal text-stone-600 max-w-md font-geist">
              Capture every meeting, call, and idea. EchoFrame listens, understands, and turns spoken words into searchable, structured insights your entire team can act on.
            </p>

            <!-- Stats & CTA -->
            <div class="mt-3 grid grid-cols-2 gap-4 sm:gap-5 text-xs sm:text-sm">
              <div class="bg-stone-100 border border-stone-200 px-4 py-4 sm:px-5 sm:py-5 flex flex-col space-y-1.5">
                <div class="text-2xl sm:text-3xl tracking-tight font-geist text-stone-900">
                  350<span class="text-stone-500 font-geist">+</span>
                </div>
                <p class="text-[11px] sm:text-xs font-normal text-stone-500 font-geist">
                  Teams are indexing their voice archives with EchoFrame every
                  week.
                </p>
              </div>
              <div class="bg-stone-100 border border-stone-200 px-4 py-4 sm:px-5 sm:py-5 flex flex-col space-y-1.5">
                <div class="text-2xl sm:text-3xl tracking-tight font-geist text-stone-900">
                  98<span class="text-stone-500 font-geist">%</span>
                </div>
                <p class="text-[11px] sm:text-xs font-normal text-stone-500 font-geist">
                  Intent recognition accuracy on real-world calls and
                  interviews.
                </p>
              </div>
            </div>

            <!-- Primary CTA -->
            <div class="mt-4 flex flex-col sm:flex-row sm:items-center sm:space-x-3 space-y-3 sm:space-y-0">
              <button class="inline-flex items-center justify-center px-5 py-2.5 bg-stone-900 text-xs sm:text-sm font-medium tracking-tight text-stone-50 hover:bg-black font-geist">
                START FREE WORKSPACE
              </button>
              <button class="inline-flex items-center text-xs sm:text-sm font-medium text-stone-700 hover:text-stone-900 font-geist">
                <!-- Solar Duotone Bold play icon -->
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 mr-1.5 text-stone-500" style="stroke-width:1.5" data-icon-set="solar" data-solar="play-circle-bold-duotone"><path fill="currentColor" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118" class=""></path></svg>
                Watch product overview
              </button>
            </div>
          </div>

          <!-- Bottom Left: Social / Footnote -->
          <div class="flex items-center justify-between pt-4 border-t border-stone-200 mt-4">
            <p class="text-[11px] font-normal text-stone-500 font-geist">
              SOC2-ready · Data encrypted in transit and at rest
            </p>
            <div class="flex items-center space-x-3 text-stone-400">
              <button class="hover:text-stone-700 transition-colors">
                <iconify-icon icon="solar:facebook-bold-duotone" class="w-5 h-5" style="stroke-width:1.5"></iconify-icon>
              </button>
              <button class="hover:text-stone-700 transition-colors">
                <iconify-icon icon="solar:twitter-bold-duotone" class="w-5 h-5" style="stroke-width:1.5"></iconify-icon>
              </button>
              <button class="hover:text-stone-700 transition-colors">
                <iconify-icon icon="solar:github-bold-duotone" class="w-5 h-5" style="stroke-width:1.5"></iconify-icon>
              </button>
            </div>
          </div>
        </section>

        <!-- Right Column -->
        <section class="relative">
          <div class="flex flex-col sm:px-8 sm:py-8 h-full pt-6 pr-6 pb-6 pl-6 relative justify-between">
            <!-- Avatar / Hero -->
            <div class="flex-1 flex items-center justify-center">
              <div class="relative w-full max-w-md">
                <div class="aspect-[4/3] overflow-hidden bg-gradient-to-br from-stone-900 via-stone-800 to-stone-900">
                  <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f01ade9-b639-4943-9782-e13ba47b8375_1600w.webp" alt="Futuristic VR headset" class="w-full h-full object-cover">
                </div>

                <!-- Left floating control -->
                <div class="absolute -left-2 sm:-left-4 bottom-8 sm:bottom-10 bg-stone-50 border border-stone-200 px-3 py-2 sm:px-4 sm:py-3 flex items-center space-x-3">
                  <div class="h-8 w-8 bg-stone-900 flex items-center justify-center border border-stone-700">
                    <!-- Solar Duotone Bold microphone -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 text-stone-200" style="stroke-width:1.5" data-icon-set="solar" data-solar="microphone-2-bold-duotone"><path fill="currentColor" fill-rule="evenodd" d="M4 9a.75.75 0 0 1 .75.75v1a7.25 7.25 0 1 0 14.5 0v-1a.75.75 0 0 1 1.5 0v1a8.75 8.75 0 0 1-8 8.718v2.282a.75.75 0 0 1-1.5 0v-2.282a8.75 8.75 0 0 1-8-8.718v-1A.75.75 0 0 1 4 9" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M9.75 7.75A.75.75 0 0 0 9 7H6.298a5.751 5.751 0 0 1 11.404 0H13.5a.75.75 0 0 0 0 1.5h4.25V10H13.5a.75.75 0 0 0 0 1.5h4.201a5.751 5.751 0 0 1-11.403 0H9A.75.75 0 0 0 9 10H6.25V8.5H9a.75.75 0 0 0 .75-.75" opacity=".5" class=""></path><path fill="currentColor" d="M12.75 10.75c0 .414.336.75.75.75h4.201l.049-1.5H13.5a.75.75 0 0 0-.75.75m0-3c0 .414.336.75.75.75h4.25L17.701 7H13.5a.75.75 0 0 0-.75.75m-3 0A.75.75 0 0 0 9 7H6.298L6.25 8.5H9a.75.75 0 0 0 .75-.75m0 3A.75.75 0 0 0 9 10H6.25l.048 1.5H9a.75.75 0 0 0 .75-.75" class=""></path></svg>
                  </div>
                  <div class="flex flex-col">
                    <span class="text-xs font-medium tracking-tight text-stone-900 font-geist">Live capture</span>
                    <span class="text-[11px] font-normal text-stone-500 font-geist">Speaker-separated in real time</span>
                  </div>
                </div>

                <!-- Right floating control -->
                <div class="-right-2 flex sm:-right-4 sm:top-10 sm:px-4 sm:py-3 bg-stone-900/95 border-stone-700 border px-3 py-2 absolute top-8 backdrop-blur-md space-x-2 items-center">
                  <div class="flex -space-x-1">
                    <span class="inline-flex h-6 w-6 border border-stone-900/80 overflow-hidden">
                      <img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="Face" class="w-full h-full object-cover">
                    </span>
                    <span class="inline-flex h-6 w-6 border border-stone-900/80 overflow-hidden">
                      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" alt="Face" class="w-full h-full object-cover">
                    </span>
                  </div>
                  <div class="flex flex-col">
                    <span class="text-[11px] font-medium tracking-tight text-stone-50 font-geist">Shared timeline</span>
                    <span class="text-[10px] font-normal text-stone-400 font-geist">Editors collaborating now</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- Bottom info cards (now 2 cards) -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 text-xs mt-6">
              <div class="bg-stone-900/95 border border-stone-700 px-4 py-3 flex flex-col space-y-1">
                <div class="flex items-center justify-between">
                  <span class="text-[11px] font-medium tracking-tight text-stone-100 font-geist">Latency</span>
                  <span class="text-[11px] font-normal text-emerald-300 font-geist">low</span>
                </div>
                <p class="text-xs font-normal text-stone-300 font-geist">
                  Responses under 250ms for real-time assistants and agents.
                </p>
              </div>
              <div class="bg-stone-900/95 border border-stone-700 px-4 py-3 flex flex-col space-y-1">
                <div class="flex items-center justify-between">
                  <span class="text-[11px] font-medium tracking-tight text-stone-100 font-geist">Context window</span>
                  <span class="text-[11px] font-normal text-amber-300 font-geist">12 hrs</span>
                </div>
                <p class="text-xs font-normal text-stone-300 font-geist">
                  Keep full-day conversations searchable and linked to
                  projects.
                </p>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  </div>