1import { ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
2
3import { Button } from "@/components/ui/button";
4import { DotBackground } from "@/registry/ui/dot-background";
5
6export function DotBackgroundDefaultExample() {
7  return (
8    <DotBackground className="min-h-screen bg-background">
9      <main className="mx-auto flex min-h-screen w-full max-w-6xl flex-col px-6 py-16 sm:px-8 lg:px-10">
10        {/* Hero */}
11        <section className="flex flex-1 flex-col items-center justify-center text-center">
12          <div className="mb-6 inline-flex items-center gap-2 rounded-full border bg-background/80 px-4 py-2 text-sm text-muted-foreground shadow-sm backdrop-blur">
13            <Sparkles className="size-4" />
14            New component preview
15          </div>
16
17          <h1 className="max-w-4xl text-balance text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
18            Build cleaner interfaces with reusable UI patterns.
19          </h1>
20
21          <p className="mt-6 max-w-2xl text-pretty text-lg leading-8 text-muted-foreground">
22            A compact landing page test for checking layout flow, spacing,
23            background layering, and child content inside the dot background
24            component.
25          </p>
26
27          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
28            <Button size="lg" className="gap-2">
29              Get started
30              <ArrowRight className="size-4" />
31            </Button>
32
33            <Button size="lg" variant="outline">
34              View components
35            </Button>
36          </div>
37        </section>
38
39        {/* Feature cards */}
40        <section className="grid gap-4 py-20 sm:grid-cols-2 lg:grid-cols-3">
41          {features.map((feature) => (
42            <div
43              key={feature.title}
44              className="rounded-2xl border bg-background/80 p-6 shadow-sm backdrop-blur"
45            >
46              <div className="mb-4 flex size-10 items-center justify-center rounded-full border bg-muted">
47                <CheckCircle2 className="size-5" />
48              </div>
49
50              <h2 className="text-lg font-semibold">{feature.title}</h2>
51
52              <p className="mt-2 text-sm leading-6 text-muted-foreground">
53                {feature.description}
54              </p>
55            </div>
56          ))}
57        </section>
58      </main>
59    </DotBackground>
60  );
61}
62
63const features = [
64  {
65    title: "Layered correctly",
66    description:
67      "The dot pattern sits behind the content while cards and text remain interactive and readable.",
68  },
69  {
70    title: "Works with sections",
71    description:
72      "Multiple blocks can stack naturally without escaping the background wrapper.",
73  },
74  {
75    title: "Responsive spacing",
76    description:
77      "The layout adapts from a single-column mobile view to a wider desktop grid.",
78  },
79];