Shader Gradient

"use client"

import { ShaderGradient } from "@/components/ui/shader-gradient"

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden bg-background">
      <ShaderGradient />
      <div className="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
        <p className="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
          New
        </p>
        <h1 className="mt-3 text-4xl font-medium tracking-tight">
          Ship the page, not the backdrop
        </h1>
        <p className="mt-3 text-muted-foreground">
          Headline, proof, and a primary action sit on the wash. The shader
          stays quiet.
        </p>
      </div>
    </section>
  )
}

<ShaderGradient theme="light" />
<ShaderGradient theme="dark" />