Landing Hero Section with Code Demo and CTAs

<section class="relative">
  <div class="mx-auto max-w-7xl px-6 md:px-8 pt-16 md:pt-24">
    <div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
      <div class="space-y-7">
        <div
          class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">
          <span class="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400 shadow-[0_0_12px_1px_rgba(16,185,129,0.7)]"></span>
          Now in public beta
          <span class="text-slate-500">•</span>
          <a href="#changelog" class="text-sky-300 hover:text-sky-200 transition-colors underline/30">See what’s new</a>
        </div>
        <h1 class="sm:text-5xl lg:text-6xl xl:text-7xl text-4xl font-semibold text-slate-50 tracking-tight">
          Build, launch, and scale in days — not months.
        </h1>
        <p class="text-base sm:text-lg text-slate-400 max-w-xl">
          Ship beautiful experiences with a powerful toolkit for design, data, and delivery. Opinionated where it
          matters, flexible where it counts.
        </p>
        <div class="flex flex-col sm:flex-row gap-3">
          <a href="#get-started"
            class="inline-flex items-center justify-center gap-2 rounded-md bg-sky-500/90 hover:bg-sky-400 text-slate-900 px-5 py-3 text-sm font-medium ring-1 ring-sky-300/40 hover:ring-sky-300 transition-all">
            Start free

          </a>
          <a href="#demo"
            class="inline-flex items-center justify-center gap-2 hover:text-white hover:bg-white/[0.04] ring-1 ring-white/10 hover:ring-white/20 transition-all text-sm text-slate-200 rounded-md pt-3 pr-5 pb-3 pl-5">
            Book a demo

          </a>
        </div>
        <div class="flex items-center gap-6 pt-3">
          <div class="flex -space-x-2">
            <img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&amp;w=80&amp;auto=format&amp;fit=crop" alt="User avatar" class="h-8 w-8 rounded-full ring-2 ring-[#0b0f1a] object-cover">
            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&amp;w=80&amp;auto=format&amp;fit=crop" alt="User avatar" class="h-8 w-8 rounded-full ring-2 ring-[#0b0f1a] object-cover" style="transition: outline 0.1s ease-in-out;">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&amp;w=80&amp;auto=format&amp;fit=crop" alt="User avatar" class="h-8 w-8 rounded-full ring-2 ring-[#0b0f1a] object-cover">
          </div>
          <div class="text-xs text-slate-400">
            Trusted by 4,000+ teams
            <span class="mx-2 text-slate-600">•</span>
            99.99% uptime
          </div>
        </div>
      </div>

      <!-- Hero visual -->
      <div class="relative">
        <div
          class="relative rounded-xl border border-white/10 bg-white/[0.03] p-4 sm:p-6 shadow-2xl ring-1 ring-black/10">
          <div class="flex items-center justify-between pb-3 border-b border-white/10">
            <div class="flex items-center gap-2">
              <span class="h-2.5 w-2.5 rounded-full bg-rose-500/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-[11px] text-slate-400">app/console</div>
          </div>
          <div class="grid md:grid-cols-2 gap-4 pt-4">
            <div class="rounded-lg border border-white/10 bg-black/50 p-4">
              <div class="flex items-center justify-between pb-3">
                <div class="flex items-center gap-2 text-xs text-slate-300">
                  <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="terminal" class="lucide lucide-terminal w-4 h-4">
                    <path d="M12 19h8" class=""></path>
                    <path d="m4 17 6-6-6-6" class=""></path>
                  </svg>
                  CLI
                </div>
                <span class="text-[10px] text-slate-500">v2.1.0</span>
              </div>
              <pre class="text-[12px] leading-relaxed text-slate-300"><span class="text-sky-300"># Create a new project</span>
npx axiom@latest init my-app
<span class="text-sky-300"># Start the dev server</span>
axiom dev --open
<span class="text-sky-300"># Deploy globally</span>
axiom deploy --prod
                  </pre>
            </div>
            <div class="border-white/10 border rounded-lg pt-4 pr-4 pb-4 pl-4 overflow-hidden">
              <div class="flex items-center justify-between pb-3">
                <div class="flex items-center gap-2 text-xs text-slate-300">
                  <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="code-2" class="lucide lucide-code-2 w-4 h-4">
                    <path d="m18 16 4-4-4-4" class=""></path>
                    <path d="m6 8-4 4 4 4" class=""></path>
                    <path d="m14.5 4-5 16" class=""></path>
                  </svg>
                  API example
                </div>
                <span class="text-[10px] text-emerald-400/90 bg-emerald-400/10 px-2 py-0.5 rounded">TypeScript</span>
              </div>
              <pre
                class="text-[12px] leading-relaxed text-slate-300"><code class=""><span class="text-violet-300">import</span> { <span class="text-sky-300">client</span> } <span class="text-violet-300">from</span> <span class="text-emerald-300">"@axiom/sdk"</span>;

<span class="text-violet-300">const</span> <span class="text-sky-300">res</span> = <span class="text-violet-300">await</span> <span class="text-sky-300">client</span>.<span class="text-amber-300">projects</span>.<span class="text-amber-300">create</span>({
  <span class="text-sky-300">name</span>: <span class="text-emerald-300">"my-app"</span>,
  <span class="text-sky-300">region</span>: <span class="text-emerald-300">"global"</span>,
});

<span class="text-sky-300">console</span>.<span class="text-amber-300">log</span>(<span class="text-sky-300">res</span>.<span class="text-amber-300">url</span>);</code></pre>
            </div>
          </div>
          <div class="mt-4 rounded-lg overflow-hidden border border-white/10">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/db097d22-b23b-4f90-8af7-5205ee757f7f_1600w.jpg" alt="Product screenshot" class="w-full h-56 sm:h-64 object-cover" style="">
          </div>
        </div>
      </div>
    </div>

    <!-- Logos -->
    <div class="mt-14 md:mt-20">
      <div class="text-center text-xs text-slate-500 mb-5">Backed by teams who value speed and craft</div>
      <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
        <div
          class="flex items-center justify-center rounded-md border border-white/10 bg-white/[0.02] py-3 text-slate-400 hover:text-slate-200 hover:bg-white/[0.04] transition-colors">
          <span class="tracking-tight text-sm font-medium">NX</span>
        </div>
        <div
          class="flex items-center justify-center rounded-md border border-white/10 bg-white/[0.02] py-3 text-slate-400 hover:text-slate-200 hover:bg-white/[0.04] transition-colors">
          <span class="tracking-tight text-sm font-medium">PRM</span>
        </div>
        <div
          class="flex items-center justify-center rounded-md border border-white/10 bg-white/[0.02] py-3 text-slate-400 hover:text-slate-200 hover:bg-white/[0.04] transition-colors">
          <span class="tracking-tight text-sm font-medium">LNT</span>
        </div>
        <div
          class="flex items-center justify-center rounded-md border border-white/10 bg-white/[0.02] py-3 text-slate-400 hover:text-slate-200 hover:bg-white/[0.04] transition-colors">
          <span class="tracking-tight text-sm font-medium">RST</span>
        </div>
        <div
          class="flex items-center justify-center rounded-md border border-white/10 bg-white/[0.02] py-3 text-slate-400 hover:text-slate-200 hover:bg-white/[0.04] transition-colors">
          <span class="tracking-tight text-sm font-medium">ARC</span>
        </div>
        <div
          class="flex items-center justify-center rounded-md border border-white/10 bg-white/[0.02] py-3 text-slate-400 hover:text-slate-200 hover:bg-white/[0.04] transition-colors">
          <span class="tracking-tight text-sm font-medium">FLX</span>
        </div>
      </div>
    </div>
  </div>
</section>