Gradient Hero 01

1export function GradientHero01() {
2  return (
3    <section className="relative min-h-screen overflow-hidden bg-background font-[system-ui,-apple-system,BlinkMacSystemFont,'Segoe_UI',sans-serif] text-foreground">
4      <div
5        className="absolute inset-x-[-18%] bottom-[-34%] h-[78%] rounded-[100%] blur-3xl"
6        style={{
7          background:
8            "radial-gradient(ellipse at center, rgba(56, 189, 248, 0.58) 0%, rgba(59, 130, 246, 0.34) 34%, rgba(99, 102, 241, 0.2) 58%, transparent 78%)",
9        }}
10      />
11      <div
12        className="absolute inset-x-0 bottom-0 h-[68%]"
13        style={{
14          background:
15            "linear-gradient(to top, rgba(37, 99, 235, 0.42), rgba(14, 165, 233, 0.2) 42%, transparent 78%)",
16        }}
17      />
18      <div
19        className="absolute inset-0"
20        style={{
21          background:
22            "radial-gradient(circle at 50% 55%, color-mix(in oklab, var(--background) 18%, transparent) 0%, transparent 34%, color-mix(in oklab, var(--background) 90%, transparent) 78%)",
23        }}
24      />
25      <div
26        className="absolute inset-0"
27        style={{
28          background:
29            "linear-gradient(to bottom, var(--background) 0%, color-mix(in oklab, var(--background) 68%, transparent) 38%, color-mix(in oklab, var(--background) 12%, transparent) 100%)",
30        }}
31      />
32 
33      <div className="relative mx-auto flex min-h-screen max-w-6xl flex-col items-center justify-center px-6 py-24 text-center">
34        <div className="rounded-full border border-border bg-background/50 px-4 py-1.5 text-sm font-medium text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_12px_40px_rgba(0,0,0,0.08)] backdrop-blur-md">
35          Previewing Componentry Blocks
36        </div>
37 
38        <h1 className="mt-8 max-w-5xl text-balance text-5xl font-medium leading-[0.96] tracking-normal md:text-6xl lg:text-7xl">
39          Launch pages that feel finished from the first pass
40        </h1>
41 
42        <p className="mt-6 max-w-2xl text-pretty text-base leading-7 text-muted-foreground md:text-lg">
43          Simple sections with considered spacing, quiet motion, and production
44          ready code you can paste into real product work.
45        </p>
46 
47        <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row">
48// … truncated