Responsive Feature Showcase Section with Gallery

<section id="showcase" class="md:mt-28 mt-20">
  <div class="mx-auto max-w-7xl px-6 md:px-8">
    <div class="grid lg:grid-cols-2 gap-10 items-center">
      <div class="">
        <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-50">Delightful by default</h2>
        <p class="mt-3 text-slate-400 max-w-xl">Crafted details and practical defaults help you deliver premium product
          quality without the overhead.</p>
        <ul class="mt-6 space-y-3">
          <li class="flex items-start gap-3">
            <span class="mt-0.5 h-5 w-5 rounded-md bg-emerald-400/15 text-emerald-300 ring-1 ring-emerald-400/20 grid place-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </span>
            <div>
              <div class="text-sm font-medium text-slate-200">Accessible components</div>
              <div class="text-sm text-slate-400">Keyboard navigation, ARIA roles, color contrast — done for you.</div>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-0.5 h-5 w-5 rounded-md bg-sky-400/15 text-sky-300 ring-1 ring-sky-400/20 grid place-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sliders-horizontal" class="lucide lucide-sliders-horizontal w-3.5 h-3.5"><line x1="21" x2="14" y1="4" y2="4" class=""></line><line x1="10" x2="3" y1="4" y2="4" class=""></line><line x1="21" x2="12" y1="12" y2="12" class=""></line><line x1="8" x2="3" y1="12" y2="12" class=""></line><line x1="21" x2="16" y1="20" y2="20" class=""></line><line x1="12" x2="3" y1="20" y2="20" class=""></line><line x1="14" x2="14" y1="2" y2="6" class=""></line><line x1="8" x2="8" y1="10" y2="14" class=""></line><line x1="16" x2="16" y1="18" y2="22" class=""></line></svg>
                </span>
            <div>
              <div class="text-sm font-medium text-slate-200">Configurable primitives</div>
              <div class="text-sm text-slate-400">Compose anything with clean APIs and typed building blocks.</div>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-0.5 h-5 w-5 rounded-md bg-amber-400/15 text-amber-300 ring-1 ring-amber-400/20 grid place-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe w-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
                </span>
            <div>
              <div class="text-sm font-medium text-slate-200">Global by design</div>
              <div class="text-sm text-slate-400">Edge routing, i18n, and multi-region scaling when you need it.</div>
            </div>
          </li>
        </ul>
        <div class="mt-6 flex gap-3">
          <a href="#"
            class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm bg-white/5 hover:bg-white/10 ring-1 ring-white/10 hover:ring-white/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="download" class="lucide lucide-download w-4 h-4">
              <path d="M12 15V3" class=""></path>
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
              <path d="m7 10 5 5 5-5" class=""></path>
            </svg>
            Download SDK
          </a>
          <a href="#"
            class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm text-slate-200 hover:text-white hover:bg-white/[0.04] ring-1 ring-white/10 hover:ring-white/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="file-code" class="lucide lucide-file-code w-4 h-4">
              <path d="M10 12.5 8 15l2 2.5" class=""></path>
              <path d="m14 12.5 2 2.5-2 2.5" class=""></path>
              <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" class=""></path>
            </svg>
            Read docs
          </a>
        </div>
      </div>
      <div class="relative">
        <div
          class="absolute -inset-2 rounded-2xl bg-gradient-to-tr from-violet-500/20 via-sky-500/10 to-fuchsia-500/20 blur-xl">
        </div>
        <div class="relative rounded-2xl border border-white/10 bg-white/[0.03] p-2 ring-1 ring-black/10">
          <div class="rounded-xl overflow-hidden">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2bbd6136-d2d5-4bca-8931-b02430b70123_1600w.jpg" alt="Showcase" class="w-full h-[360px] sm:h-[420px] object-cover" style="">
          </div>
          <div class="grid grid-cols-3 gap-2 mt-2">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8d8ff092-132d-4cec-88a1-ac20bce98b33_800w.jpg" alt="Gallery 1" class="h-28 w-full object-cover rounded-lg border border-white/10" style="">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/23dc40ab-67bd-4b22-8023-4e4d69b1f770_800w.jpg" alt="Gallery 2" class="h-28 w-full object-cover rounded-lg border border-white/10">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/98116cee-99ac-4356-a273-8f3b0bbcee95_800w.jpg" alt="Gallery 3" class="h-28 w-full object-cover rounded-lg border border-white/10">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>