Hero Section

<section className="flex flex-col items-center gap-6
  px-8 py-16 text-center">

  {/* Badge */}
  <span className="rounded-full bg-indigo-100 px-4 py-1
    text-xs font-semibold text-indigo-700">
    Now in Beta
  </span>

  {/* Gradient Heading */}
  <h1 className="text-4xl sm:text-5xl font-extrabold
    tracking-tight">
    Build stunning apps with
    <span className="bg-gradient-to-r from-indigo-500
      to-fuchsia-500 bg-clip-text text-transparent">
      zero effort
    </span>
  </h1>

  {/* Subtitle */}
  <p className="max-w-lg text-lg text-neutral-600">
    The fastest way to ship beautiful interfaces.
  </p>

  {/* CTA Buttons */}
  <div className="flex flex-wrap justify-center gap-4">
    <button className="group rounded-full bg-indigo-500
      px-6 py-3 text-white font-semibold
      hover:bg-indigo-600 shadow-md">
      Get Started
      <ArrowRight className="group-hover:translate-x-1" />
    </button>
    <button className="rounded-full px-6 py-3
      ring-1 ring-inset ring-neutral-300
      hover:bg-neutral-50">
      Live Demo
    </button>
  </div>
</section>