1"use client";
2
3import { GridBackground } from "@/registry/ui/grid-background";
4
5export type GridBackgroundPlaygroundProps = {
6  size?: number;
7  color?: string;
8  thickness?: number;
9  opacity?: number;
10};
11
12export function GridBackgroundDefaultExample({
13  size = 40,
14  color = "rgba(255,255,255,0.08)",
15  thickness = 1,
16  opacity = 1,
17}: GridBackgroundPlaygroundProps) {
18  return (
19    <div className="relative min-h-[460px] w-full overflow-hidden rounded-xl border border-border bg-background">
20      <GridBackground
21        size={size}
22        color={color}
23        thickness={thickness}
24        opacity={opacity}
25      />
26
27      <div className="relative z-10 flex min-h-[460px] items-center justify-center p-10 text-sm text-muted-foreground">
28        Your content here
29      </div>
30    </div>
31  );
32}

1"use client";
2
3import { GridBackground } from "@/registry/ui/grid-background";
4import { Button } from "@/components/ui/button";
5
6const LANDING_FEATURES = [
7  {
8    title: "Layout-first",
9    description:
10      "Place sections inside a relative shell; the grid stays behind your page flow.",
11  },
12  {
13    title: "Themeable grid",
14    description:
15      "Tune cell size, line color, thickness, and opacity to match your brand.",
16  },
17  {
18    title: "Drop-in overlay",
19    description:
20      "Absolute inset layer with pointer-events-none so buttons and links stay interactive.",
21  },
22] as const;
23
24export function GridBackgroundHeroExample() {
25  return (
26    <div className="relative w-full overflow-hidden rounded-xl border border-border bg-background">
27      <GridBackground size={32} />
28
29      <div className="relative z-10 flex min-h-[600px] flex-col">
30        <header className="flex items-center justify-between gap-4 px-6 py-4">
31          <span className="text-sm font-semibold tracking-tight">Acme</span>
32          <nav
33            className="hidden items-center gap-6 text-sm text-muted-foreground sm:flex"
34            aria-label="Primary"
35          >
36            <span>Product</span>
37            <span>Pricing</span>
38            <span>Docs</span>
39          </nav>
40          <Button size="sm" variant="outline">
41            Sign in
42          </Button>
43        </header>
44
45        <section className="flex flex-1 flex-col items-center justify-center px-6 py-14 text-center">
46          <span className="mb-4 inline-flex rounded-full border border-border/80 bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground">
47            Now in public beta
48          </span>
49          <h1 className="max-w-lg text-3xl font-semibold tracking-tight sm:text-4xl">
50            Build your next launch on a clean grid
51          </h1>
52          <p className="mt-4 max-w-md text-sm leading-relaxed text-muted-foreground">
53            A minimal landing shell: navigation, hero, and feature row over a
54            decorative grid background.
55          </p>
56          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
57            <Button>Get started</Button>
58            <Button variant="outline">Book a demo</Button>
59          </div>
60        </section>
61
62        <section className="grid gap-4 px-6 py-8 sm:grid-cols-3">
63          {LANDING_FEATURES.map((feature) => (
64            <div
65              key={feature.title}
66              className="rounded-lg border border-border/60 bg-card/40 p-4 text-left backdrop-blur-sm"
67            >
68              <h2 className="text-sm font-medium">{feature.title}</h2>
69              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
70                {feature.description}
71              </p>
72            </div>
73          ))}
74        </section>
75      </div>
76    </div>
77  );
78}