CTA Hero Section with Quickstart Code Snippet

<div class="sm:px-6 md:pb-16 border-white/10 border-t pt-12 pr-5 pb-12 pl-5 max-w-6xl">
  <div
    class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-white/[0.06] to-white/[0.02]">
    <div class="absolute inset-0 opacity-20">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/9033cfea-64ae-4e9a-b2ac-3e73d2c2f4af_1600w.jpg" alt="" class="w-full h-full object-cover">
    </div>
    <div class="relative grid lg:grid-cols-3 gap-6 md:p-8 pt-6 pr-6 pb-6 pl-6">
      <div class="lg:col-span-2">
        <h3 class="text-2xl md:text-3xl lg:text-4xl tracking-tight font-space-grotesk font-medium" data-animate=""
          style="opacity: 1; transform: none; filter: blur(0px);">
          Ready to orchestrate the secure Web3 edge?
        </h3>
        <p class="mt-2 text-sm md:text-base text-gray-200 font-geist max-w-2xl" data-animate=""
          style="opacity: 1; transform: none; filter: blur(0px);">
          Spin up validators, elastic RPC, and IBC relayers in minutes. Audit-ready from day one.
        </p>
        <div class="mt-5 flex flex-wrap items-center gap-3" data-animate=""
          style="opacity: 1; transform: none; filter: blur(0px);">
          <button class="inline-flex items-center gap-2 rounded-full px-5 py-3 bg-white text-black text-sm font-semibold hover:bg-gray-100 transition-colors font-geist">
            <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="arrow-right" class="lucide lucide-arrow-right w-4.5 h-4.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            Request Access
          </button>
          <button class="inline-flex items-center gap-2 rounded-full px-5 py-3 bg-white/10 border border-white/15 text-white text-sm font-medium hover:bg-white/15 transition-colors font-geist">
            <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="book-open" class="lucide lucide-book-open w-4.5 h-4.5"><path d="M12 7v14" class=""></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" class=""></path></svg>
            View Docs
          </button>
          <span class="text-[11px] text-gray-300 font-geist">No credit card required</span>
        </div>
      </div>
      <div class="lg:col-span-1">
        <div class="h-full rounded-2xl border border-white/10 bg-black/50 p-5 backdrop-blur-sm" data-animate=""
          style="opacity: 1; transform: none; filter: blur(0px);">
          <div class="flex items-center gap-2 text-sm text-gray-300 font-geist">
            <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 w-4.5 h-4.5">
              <path d="M12 19h8" class=""></path>
              <path d="m4 17 6-6-6-6" class=""></path>
            </svg>
            Quickstart
          </div>
          <pre class="mt-3 text-[12px] leading-relaxed text-gray-100 font-medium overflow-x-auto"><code class="font-geist">$ npx qmctl@latest init
$ qmctl chains add --id osmosis
$ qmctl rpc deploy --region fra-1 --dedicated
$ qmctl relayer init --from osmosis --to cosmoshub --secure

✔ ready in &lt; 2 minutes</code></pre>
        </div>
      </div>
    </div>
    <div
      class="pointer-events-none absolute -z-0 -bottom-16 -right-12 w-96 h-96 rounded-full bg-orange-600/40 blur-3xl opacity-60">
    </div>
  </div>
</div>