Two-Column Feature Section with Image

<section class="w-full max-w-7xl sm:px-6 lg:px-8 mx-auto px-4">
        <div class="mt-14 grid items-center gap-8 lg:grid-cols-2">
          <div class="order-2 lg:order-1">
            <h2 class="text-3xl font-semibold tracking-tight">From prototype to production</h2>
            <p class="max-w-xl text-base text-neutral-300 mt-4">
              Iterate quickly with evals and deploy globally with low latency. Observability lets you see failures before customers do.
            </p>
            <ul class="mt-6 space-y-3 text-sm text-neutral-300">
              <li class="flex items-start 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 mt-0.5 h-5 w-5 text-lime-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                Unified logs, traces, and costs
              </li>
              <li class="flex items-start 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 mt-0.5 h-5 w-5 text-lime-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                Canary releases and rollbacks
              </li>
              <li class="flex items-start 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 mt-0.5 h-5 w-5 text-lime-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
                SDKs for JS, Python, and Go
              </li>
            </ul>
            <div class="mt-6 inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-neutral-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="terminal" class="lucide lucide-terminal mr-2 h-4 w-4 text-lime-300"><path d="M12 19h8" class=""></path><path d="m4 17 6-6-6-6" class=""></path></svg>
              npm i ai-factory
            </div>
          </div>
          <div class="order-1 lg:order-2">
            <div class="relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900 p-4">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/605ecb27-40ef-4754-b4a3-2cd44c31cbf7_800w.jpg" alt="Dashboard preview" class="h-64 w-full rounded-xl object-cover sm:h-80">
              <div class="absolute right-8 top-8 inline-flex animate-[float_6s_ease-in-out_infinite] gap-2 ring-1 ring-white/10 text-xs text-neutral-200 bg-neutral-950/70 rounded-full pt-2 pr-3 pb-2 pl-3 backdrop-blur 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity" class="lucide lucide-activity h-4 w-4 text-lime-300"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg>
                Live: 12 regions
              </div>
            </div>
          </div>
        </div>
      </section>