Server-First Streaming Feature Card

<article class="group relative overflow-hidden rounded-3xl border border-neutral-800 bg-neutral-900 shadow-sm transition-shadow hover:shadow-md">
  <div class="p-6 sm:p-8">
    <div class="relative h-56 sm:h-64 rounded-2xl bg-neutral-900 ring-1 ring-inset ring-white/5 overflow-hidden">
      <svg class="absolute inset-0 h-full w-full text-neutral-800" aria-hidden="true">
        <defs>
          <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
            <path d="M24 0H0V24" fill="none" stroke="currentColor" stroke-width="1"></path>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)"></rect>
      </svg>
      <span class="absolute left-6 top-4 h-0.5 w-10 rounded bg-sky-500"></span>
      <div class="absolute right-6 top-8 sm:right-10 sm:top-10 w-[78%] rounded-2xl border border-neutral-800 bg-neutral-900 shadow-lg">
        <div class="flex items-center gap-2 px-4 py-3 border-b border-neutral-800">
          <span class="h-2.5 w-2.5 rounded-full bg-neutral-800"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-neutral-800"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-neutral-800"></span>
          <div class="ml-3 h-2 w-24 rounded bg-neutral-800"></div>
        </div>
        <div class="grid grid-cols-3 gap-3 p-4">
          <div class="col-span-2 rounded-lg border border-neutral-800 overflow-hidden">
            <img src="https://images.unsplash.com/photo-1558981806-ec527fa84c39?q=80&w=1200&auto=format&fit=crop" alt="Minimal 3D render" class="h-28 w-full object-cover">
          </div>
          <div class="rounded-lg border border-neutral-800 overflow-hidden">
            <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=800&auto=format&fit=crop" alt="Mountain landscape" class="h-28 w-full object-cover">
          </div>
          <div class="rounded-lg border border-neutral-800 bg-neutral-900 h-24"></div>
          <div class="rounded-lg border border-neutral-800 bg-neutral-900 h-24"></div>
          <div class="rounded-lg border border-neutral-800 bg-neutral-900 h-24"></div>
        </div>
      </div>
    </div>
    <div class="mt-6 sm:mt-8">
      <div class="flex items-center gap-3">
        <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" class="h-5 w-5 text-neutral-400">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
          <circle cx="12" cy="12" r="4"></circle>
        </svg>
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-neutral-100">Server‑First Streaming</h3>
      </div>
      <p class="mt-3 text-neutral-400 text-sm">Stream HTML progressively, hydrate in place, and keep navigation instant with seamless routing.</p>
      <div class="mt-4">
        <a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300">
          See how it works
          <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" class="h-4 w-4">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</article>