Hero Section With Stats

<div class="hero-section max-w-5xl">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap'); .font-geist { font-family: 'Geist', 'Helvetica Neue', sans-serif !important; } .font-jakarta { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif !important; }
  </style>
  <div class="mt-12 grid md:grid-cols-2 gap-10 items-center">
    <div>
      <h1 class="sm:text-5xl lg:text-6xl text-4xl font-semibold text-slate-900 tracking-tight font-jakarta">Accelerate Your Growth. Unlock New Horizons.</h1>
      <p class="mt-6 text-lg max-w-lg text-slate-600 font-geist">
        Our platform empowers modern teams to build, launch and scale products faster with data-backed insights and modular tooling.
      </p>
      <div class="mt-8 flex flex-wrap gap-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 rounded-full bg-cyan-500 font-medium shadow-sm transition hover:bg-cyan-600 text-white font-geist">Start Free Trial</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 rounded-full border font-medium transition border-slate-300 hover:border-slate-400 text-slate-900 font-geist">Explore Docs</a>
      </div>
      <div class="mt-16 flex items-start gap-12">
        <div>
          <p class="text-4xl text-slate-900 font-jakarta font-semibold">5M+</p>
          <p class="mt-1 text-sm text-slate-600 font-geist">monthly interactions</p>
        </div>
        <div class="w-px h-12 hidden md:block bg-slate-300"></div>
        <div>
          <p class="text-4xl text-slate-900 font-jakarta font-semibold">98%</p>
          <p class="mt-1 text-sm text-slate-600 font-geist">CSAT score</p>
        </div>
      </div>
    </div>
    <div class="relative h-[340px] sm:h-[420px] lg:h-[480px]">
      <div class="absolute inset-0 -translate-x-4 sm:-translate-x-8">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dbbf1869-f6fb-45ad-af6f-bde5244ee6df_1600w.jpg" alt="Team collaboration" class="w-full h-full object-cover rounded-xl">
      </div>
    </div>
  </div>
</div>