Split Hero

export default function SplitHero() {
  return (
    <section className="bg-white px-6 py-20 dark:bg-zinc-950">
      <div className="mx-auto grid max-w-6xl items-center gap-12 md:grid-cols-2">
        <div>
          <p className="text-sm font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
            For growing teams
          </p>
          <h1 className="mt-4 text-balance text-4xl font-bold tracking-tight text-zinc-900 sm:text-5xl dark:text-white">
            The workspace your whole team will actually use
          </h1>
          <p className="mt-5 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
            Plan, build and ship in one place. No more tab-hopping, no more lost context.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a
              href="#"
              className="rounded-lg bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500"
            >
              Start free
            </a>
            <a
              href="#"
              className="rounded-lg border border-zinc-300 px-5 py-3 text-sm font-semibold text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-900"
            >
              Book a demo
            </a>
          </div>
          <div className="mt-8 flex items-center gap-3 text-sm text-zinc-500 dark:text-zinc-500">
            <div className="flex -space-x-2">
              {["#f59e0b", "#10b981", "#6366f1", "#ec4899"].map((c) => (
                <span
                  key={c}
                  className="h-7 w-7 rounded-full border-2 border-white dark:border-zinc-950"
                  style={{ background: c }}
                />
              ))}
            </div>
            Trusted by 4,000+ teams
          </div>
        </div>
        <div className="relative">
          <div className="absolute -inset-4 -z-10 rounded-3xl bg-gradient-to-tr from-indigo-500/20 via-fuchsia-500/10 to-transparent blur-2xl" />
          <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
            <div className="flex gap-1.5 pb-3">
              <span className="h-3 w-3 rounded-full bg-red-400" />
              <span className="h-3 w-3 rounded-full bg-amber-400" />
              <span className="h-3 w-3 rounded-full bg-green-400" />
            </div>
            <div className="space-y-3">
              <div className="h-24 rounded-lg bg-gradient-to-br from-indigo-500 to-fuchsia-500" />
              <div className="h-3 w-3/4 rounded bg-zinc-200 dark:bg-zinc-800" />
              <div className="h-3 w-1/2 rounded bg-zinc-200 dark:bg-zinc-800" />
              <div className="grid grid-cols-3 gap-3 pt-1">
                <div className="h-16 rounded-lg bg-zinc-100 dark:bg-zinc-800" />
                <div className="h-16 rounded-lg bg-zinc-100 dark:bg-zinc-800" />
                <div className="h-16 rounded-lg bg-zinc-100 dark:bg-zinc-800" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}