Film Grain Stack

import { FilmGrainStack } from '@/components/blocks/film-grain-stack'

import { FilmGrainStack } from '@/components/blocks/film-grain-stack'

export default function FilmGrainStackDemo() {
  return (
    <FilmGrainStack intensity={0.7} className="bg-background">
      <section className="mx-auto flex min-h-[600px] max-w-4xl flex-col items-start justify-center px-6 py-24">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Northlight Post · Reel 07
        </p>
        <h2 className="mt-4 max-w-2xl text-4xl font-semibold tracking-tight text-balance text-foreground sm:text-6xl">
          Graded in camera. Grain added honestly.
        </h2>
        <p className="mt-6 max-w-xl text-sm leading-relaxed text-muted-foreground sm:text-base">
          Every frame passes a real gate, a breath of weave, a wash of silver halide, and a
          fall-off that keeps your eye on the middle of the frame. The interface underneath
          stays sharp, live, and fully readable.
        </p>
        <div className="mt-10 flex flex-wrap items-center gap-5">
          <a
            href="#suite"
            className="inline-flex h-11 items-center justify-center rounded-lg bg-primary px-6 text-sm font-medium text-primary-foreground transition-transform duration-150 hover:scale-[1.02] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Book the grading suite
          </a>
          <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            35 mm scan · ±1 px weave
          </span>
        </div>
      </section>
    </FilmGrainStack>
  )
}