Developer SaaS Hero Section with CTAs & Code Snippet

<section class="relative">
      <div class="mx-auto max-w-7xl px-6 pt-10 pb-20">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
          <div class="space-y-6">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 ring-1 ring-white/10 px-3 py-1 text-xs text-neutral-300">
              <span class="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
              Just shipped v1.6 — Improved performance
            </div>
            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight leading-tight">
              Build. Ship. Scale.
              <span class="block text-transparent bg-clip-text bg-gradient-to-r from-white to-white/60">Faster than ever.</span>
            </h1>
            <p class="text-base sm:text-lg text-neutral-300/90 max-w-xl">
              Nova gives your team the tools to design, develop, and deploy beautiful experiences without the heavy lifting. Ship higher quality products in days, not months.
            </p>
            <div class="flex flex-wrap items-center gap-3">
              <a href="#" class="px-4 py-2.5 rounded-lg bg-emerald-500/90 hover:bg-emerald-500 text-neutral-900 text-sm font-semibold transition-colors">
                Start free trial
              </a>
              <a href="#" class="px-4 py-2.5 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 text-sm font-medium transition-colors 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="play" class="lucide lucide-play h-4 w-4" style="stroke-width:1.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" class=""></path></svg>
                Watch demo
              </a>
            </div>
            <div class="flex items-center gap-6 pt-4">
              <div class="flex -space-x-3">
                <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="user" class="h-8 w-8 rounded-full ring-2 ring-neutral-950 object-cover">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="user" class="h-8 w-8 rounded-full ring-2 ring-neutral-950 object-cover">
                <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="user" class="h-8 w-8 rounded-full ring-2 ring-neutral-950 object-cover">
              </div>
              <p class="text-sm text-neutral-300">
                Trusted by 4,000+ teams
              </p>
            </div>
          </div>

          <!-- Hero visual -->
          <div class="relative">
            <div class="absolute -inset-4 rounded-3xl bg-[conic-gradient(from_180deg_at_50%_50%,rgba(16,185,129,0.10),transparent_50%)] blur-2xl"></div>
            <div class="relative rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur-xl p-5">
              <!-- Code header -->
              <div class="flex items-center justify-between px-2 py-2 rounded-lg bg-white/5 ring-1 ring-white/10">
                <div class="flex items-center gap-2">
                  <span class="h-2.5 w-2.5 rounded-full bg-red-400/80"></span>
                  <span class="h-2.5 w-2.5 rounded-full bg-amber-400/80"></span>
                  <span class="h-2.5 w-2.5 rounded-full bg-emerald-400/80"></span>
                </div>
                <div class="text-xs text-neutral-300/80">app.jsx</div>
                <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="copy" class="lucide lucide-copy h-4 w-4 text-neutral-400 hover:text-white transition-colors cursor-pointer" style="stroke-width:1.5;"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" class=""></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" class=""></path></svg>
                </div>
              </div>
              <!-- Code block -->
              <pre class="mt-3 rounded-lg bg-black/40 ring-1 ring-white/10 p-4 overflow-x-auto text-sm leading-6" style="font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;"><span class="text-emerald-400">import</span> Nova <span class="text-emerald-400">from</span> <span class="text-amber-300">'nova'</span>
<span class="text-emerald-400">const</span> app = <span class="text-emerald-400">new</span> Nova()

app.<span class="text-sky-300">use</span>(<span class="text-amber-300">'auth'</span>)
app.<span class="text-sky-300">define</span>(<span class="text-amber-300">'/hello'</span>, <span class="text-emerald-400">async</span> (req) =&gt; {
  <span class="text-emerald-400">return</span> { message: <span class="text-amber-300">'Build. Ship. Scale.'</span> }
})

app.<span class="text-sky-300">deploy</span>({ region: <span class="text-amber-300">'global'</span> })
              </pre>

              <!-- Metrics -->
              <div class="mt-4 grid grid-cols-3 gap-3">
                <div class="rounded-lg bg-white/5 ring-1 ring-white/10 p-3">
                  <div class="text-xs text-neutral-400">Latency</div>
                  <div class="mt-1 text-lg font-semibold tracking-tight">38ms</div>
                </div>
                <div class="rounded-lg bg-white/5 ring-1 ring-white/10 p-3">
                  <div class="text-xs text-neutral-400">Uptime</div>
                  <div class="mt-1 text-lg font-semibold tracking-tight">99.99%</div>
                </div>
                <div class="rounded-lg bg-white/5 ring-1 ring-white/10 p-3">
                  <div class="text-xs text-neutral-400">Requests</div>
                  <div class="mt-1 text-lg font-semibold tracking-tight">1.4M</div>
                </div>
              </div>
            </div>

            <!-- Floating card -->
            <div class="hidden sm:block absolute -bottom-10 -right-6 rounded-xl bg-white/5 ring-1 ring-white/10 backdrop-blur-xl p-4 hover:translate-y-[-2px] transition will-change-transform">
              <div class="flex items-center gap-3">
                <div class="h-9 w-9 rounded-md bg-white/10 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="rocket" class="lucide lucide-rocket h-4.5 w-4.5 text-emerald-300" style="stroke-width:1.5;"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
                </div>
                <div>
                  <div class="text-sm font-medium">Zero-config deploys</div>
                  <div class="text-xs text-neutral-400">Ship globally in seconds</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Divider -->
        <div class="mt-16 h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
      </div>
    </section>