Product Hero Section with CTA & Newsletter Signup

<section class="mt-6">
  <div class="relative overflow-hidden ring-1 ring-black/10 bg-neutral-900 rounded-3xl">
    <!-- Background image -->
    <div class="absolute inset-0">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/80525773-1209-43bf-b1fc-df487cfc36b6_1600w.jpg" alt="Calm workspace" class="h-full w-full object-cover opacity-70">
      <div class="absolute inset-0 bg-gradient-to-tr from-black/70 via-black/40 to-transparent"></div>
    </div>

    <!-- Content -->
    <div class="relative z-10 sm:p-8 md:p-12 lg:p-16 pt-5 pr-5 pb-5 pl-5">
      <!-- Floating mini-nav and newsletter on large screens -->
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        <div class="lg:col-span-7">
          <h1 class="text-white tracking-tight text-4xl sm:text-5xl lg:text-6xl font-semibold leading-[1.05]">
            The instrument, reimagined
          </h1>
          <p class="mt-5 text-neutral-200 text-base sm:text-lg max-w-xl">
            Meet Solace One — a calm‑first device designed for deep focus, gentle light, and days of battery. A quieter
            way to think and make.
          </p>

          <!-- Feature points -->
          <div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl">
            <div class="flex items-start gap-3">
              <div
                class="h-9 w-9 rounded-lg bg-white/10 backdrop-blur ring-1 ring-white/15 flex items-center justify-center text-amber-300">
                <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="moon" class="lucide lucide-moon h-4 w-4">
                  <path
                    d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
                  </path>
                </svg>
              </div>
              <div class="">
                <p class="text-white font-medium text-sm">Paper‑calm display</p>
                <p class="text-neutral-300 text-xs">Soft contrast, low glare</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <div
                class="h-9 w-9 rounded-lg bg-white/10 backdrop-blur ring-1 ring-white/15 flex items-center justify-center text-amber-300">
                <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="target" class="lucide lucide-target h-4 w-4">
                  <circle cx="12" cy="12" r="10"></circle>
                  <circle cx="12" cy="12" r="6"></circle>
                  <circle cx="12" cy="12" r="2"></circle>
                </svg>
              </div>
              <div class="">
                <p class="text-white font-medium text-sm">Flow‑first OS</p>
                <p class="text-neutral-300 text-xs">No noise, just intent</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <div
                class="h-9 w-9 rounded-lg bg-white/10 backdrop-blur ring-1 ring-white/15 flex items-center justify-center text-amber-300">
                <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="battery" class="lucide lucide-battery h-4 w-4">
                  <path d="M 22 14 L 22 10"></path>
                  <rect x="2" y="6" width="16" height="12" rx="2"></rect>
                </svg>
              </div>
              <div class="">
                <p class="text-white font-medium text-sm">Days of charge</p>
                <p class="text-neutral-300 text-xs">Up to 72h real work</p>
              </div>
            </div>
          </div>

          <!-- CTA row -->
          <div class="mt-8 flex flex-col sm:flex-row sm:items-center gap-3">
            <a href="#"
              class="inline-flex items-center justify-center rounded-xl bg-amber-500 text-neutral-900 px-5 py-3 text-sm font-medium shadow-md hover:bg-amber-400 transition-colors">
              Order now
              <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 ml-2">
                <path d="M5 12h14"></path>
                <path d="m12 5 7 7-7 7"></path>
              </svg>
            </a>
            <button class="inline-flex items-center gap-2 text-sm text-white/90 hover:text-white transition-colors">
                      <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="info" class="lucide lucide-info h-4 w-4"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
                      Learn more
                    </button>
          </div>
        </div>

        <!-- Newsletter card (floating on the right) -->
        <div class="lg:col-span-5">
          <div
            class="lg:ml-auto w-full max-w-md lg:max-w-sm rounded-2xl bg-white/80 backdrop-blur-md ring-1 ring-black/10 shadow-lg p-4 sm:p-5">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-neutral-900 font-medium tracking-tight">Newsletter</p>
                <p class="text-neutral-500 text-xs mt-0.5">Updates. No noise.</p>
              </div>
              <span class="inline-flex items-center gap-2 text-[11px] text-neutral-600">
                        <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="shield-check" class="lucide lucide-shield-check h-3.5 w-3.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>
                        Privacy-first
                      </span>
            </div>
            <form class="mt-3">
              <div class="flex gap-2">
                <div class="relative flex-1">
                  <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="mail"
                    class="lucide lucide-mail h-4 w-4 text-neutral-400 absolute left-3 top-1/2 -translate-y-1/2">
                    <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
                    <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                  </svg>
                  <input type="email" placeholder="you@domain.com" class="w-full pl-9 pr-3 py-2.5 text-sm rounded-xl ring-1 ring-black/10 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400">
                </div>
                <button type="submit" class="rounded-xl bg-neutral-900 text-white px-4 py-2.5 text-sm font-medium hover:bg-neutral-800 transition-colors">
                          Subscribe
                        </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- Bottom overlays -->
      <div class="mt-8 sm:mt-12 flex items-end justify-between">
        <!-- Video teaser -->
        <button class="group inline-flex items-center gap-3">
                  <div class="relative w-40 sm:w-48 aspect-[16/10] rounded-xl overflow-hidden ring-2 ring-amber-400/70 shadow-lg">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a6398c31-e7f2-45ea-9396-0967a4ff0c97_800w.jpg" alt="Product teaser" class="h-full w-full object-cover">
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                      <div class="h-10 w-10 rounded-full bg-white/90 text-neutral-900 flex items-center justify-center group-hover:scale-105 transition-transform">
                        <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="play" class="lucide lucide-play h-5 w-5 translate-x-0.5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
                      </div>
                    </div>
                  </div>
                  <div class="hidden sm:flex flex-col">
                    <span class="text-white/90 text-sm font-medium">Watch the overview</span>
                    <span class="text-neutral-300 text-xs">1 min • No fluff</span>
                  </div>
                </button>

        <!-- Inline stock badge + CTA -->
        <div class="hidden md:flex items-center gap-3">
          <div class="text-xs text-neutral-300">
            In stock • Ships in 2–5 business days
          </div>
          <a href="#"
            class="inline-flex items-center justify-center rounded-xl bg-amber-500 text-neutral-900 px-4 py-2.5 text-sm font-medium shadow-md hover:bg-amber-400 transition-colors">
            Order now
            <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 ml-2">
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>