Gradient Feature Card with Code Snippet

<div class="relative ring-1 ring-white/10 md:p-10 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.6)] overflow-hidden rounded-2xl pt-6 pr-6 pb-6 pl-6">
          <div class="absolute -right-10 -top-10 h-56 w-56 rounded-full bg-gradient-to-tr from-indigo-500/20 to-sky-300/10 blur-2xl"></div>
          <div class="flex items-center gap-3 mb-6">
            <div class="h-10 w-10 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-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="code-2" class="lucide lucide-code-2 h-5 w-5 text-sky-300"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
            </div>
            <h3 class="text-2xl md:text-3xl font-semibold tracking-tight text-white">Developer Experience</h3>
          </div>
          <p class="text-white/70 max-w-2xl">
            We obsess over the small edges so you don’t have to. CometID ships with clean SDKs, copy‑paste snippets, and zero‑surprise APIs.
            It just works—locally, on preview, and in prod. Keep full control of sessions, UX, and data.
          </p>

          <!-- UI stub -->
          <div class="mt-8 rounded-xl bg-[#0d1330]/60 ring-1 ring-white/10 overflow-hidden">
            <div class="flex items-center gap-2 px-4 py-3 border-b border-white/5">
              <span class="h-2.5 w-2.5 rounded-full bg-rose-400/80"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-amber-300/80"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-emerald-300/80"></span>
              <span class="ml-3 text-xs text-white/60">app/pages/api/auth.ts</span>
            </div>
            <div class="p-4 md:p-6 text-[13px] leading-relaxed font-medium text-white/80">
              <div class="flex items-center gap-2">
                <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="chevrons-right" class="lucide lucide-chevrons-right h-4 w-4 text-indigo-300"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                <span class="">import { createClient } from "@cometid/js"</span>
              </div>
              <div class="mt-2">
                <span class="text-white/60">// one call magic link + passkeys</span>
              </div>
              <div class="mt-2">
                <span class="text-sky-300">const</span> auth = createClient({ projectId: "<span class="text-emerald-300">app_7x9</span>" })
              </div>
              <div class="mt-2">
                <span class="text-sky-300">await</span> auth.signIn({ email: "you@product.dev" })
              </div>
            </div>
          </div>
        </div>