Hero Section with Badge and CTA

<section class="mx-auto max-w-7xl px-6 pb-10 pt-6 md:pb-16 md:pt-8">
  <div class="max-w-2xl">
    <span class="inline-flex items-center gap-2 rounded-full bg-emerald-600/10 px-3 py-1 text-xs font-medium text-emerald-700 ring-1 ring-emerald-600/20 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" class="h-3.5 w-3.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>30K+ Pioneers</span>
    <h1 class="mt-4 text-5xl md:text-6xl tracking-tight text-slate-900 font-geist font-light">Discover Boundless Realms
    </h1>
    <p class="mt-4 max-w-xl text-base md:text-lg text-slate-600 font-geist">Wander through AI-shaped spaces tuned to
      your mood. Create, unwind, and roam without edges.</p>
    <div class="mt-6"><a href="#"
        class="inline-flex items-center gap-3 rounded-full bg-gradient-to-br from-emerald-600 to-teal-600 px-5 py-3 text-sm font-medium text-white shadow-lg shadow-emerald-600/30 ring-1 ring-white/20 hover:from-emerald-700 hover:to-teal-700 font-geist">Open
        Your First
        Realm<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/20 ring-1 ring-white/30"><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" class="h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></a>
    </div>
  </div>
</section>