Cinematic Gradient Hero

1export default function CinematicHero() {
2  return (
3    <section className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#09090b]">
4      {/* Gradient layers */}
5      <div className="pointer-events-none absolute inset-0">
6        <div className="absolute left-1/4 top-1/3 h-[600px] w-[600px] rounded-full bg-orange-600/8 blur-[120px]" />
7        <div className="absolute right-1/4 bottom-1/4 h-[500px] w-[500px] rounded-full bg-amber-500/6 blur-[100px]" />
8        <div className="absolute left-1/2 top-1/2 h-[300px] w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-400/4 blur-[80px]" />
9      </div>
10      
11      {/* Content */}
12      <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
13        <p className="mb-6 text-sm font-medium uppercase tracking-[0.2em] text-orange-400/80">Now in public beta</p>
14        <h1 className="text-5xl font-bold leading-[1.05] tracking-[-0.03em] text-white sm:text-7xl md:text-8xl">
15          Where prompts<br />become <span className="text-orange-400">pixels</span>
16        </h1>
17        <p className="mx-auto mt-6 max-w-lg text-lg leading-relaxed text-zinc-400">
18          Discover, preview, and copy AI-generated UI components. See the exact model and prompt behind every piece.
19        </p>
20        <div className="mt-10 flex items-center justify-center gap-4">
21          <button className="rounded-lg bg-orange-500 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-600">
22            Explore Components
23          </button>
24          <button className="rounded-lg border border-zinc-700 px-6 py-3 text-sm font-semibold text-zinc-300 transition hover:border-zinc-500 hover:text-white">
25            Submit Yours
26          </button>
27        </div>
28      </div>
29      
30      {/* Bottom fade */}
31      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-[#09090b] to-transparent" />
32    </section>
33  );
34}