1"use client";
2
3import { SectionNavigatorOverlay } from "@/registry/ui/section-navigator-overlay";
4
5export function SectionNavigatorOverlayDefaultExample() {
6  return (
7    <main className="min-h-screen bg-zinc-950 text-white">
8      <SectionNavigatorOverlay />
9
10      <section id="hero" className="grid min-h-screen place-items-center px-6">
11        <div className="max-w-3xl text-center">
12          <p className="mb-4 text-sm font-medium text-cyan-300">TT UI</p>
13
14          <h1 className="text-5xl font-bold tracking-tight md:text-7xl">
15            Components built to showcase better.
16          </h1>
17
18          <p className="mt-6 text-lg leading-8 text-zinc-400">
19            A component library with polished UI elements and useful preview
20            tools for building, testing, and presenting interfaces.
21          </p>
22        </div>
23      </section>
24
25      <section
26        id="features"
27        className="grid min-h-screen place-items-center px-6"
28      >
29        <div className="grid max-w-5xl gap-4 md:grid-cols-3">
30          {["Preview faster", "Demo cleaner", "Ship better"].map((feature) => (
31            <article
32              key={feature}
33              className="rounded-3xl border border-white/10 bg-white/4 p-6 shadow-2xl shadow-black/30 backdrop-blur"
34            >
35              <h2 className="text-xl font-semibold">{feature}</h2>
36
37              <p className="mt-3 text-sm leading-6 text-zinc-400">
38                Use focused utilities to test responsive layouts, theme states,
39                and long-page navigation without leaving your flow.
40              </p>
41            </article>
42          ))}
43        </div>
44      </section>
45
46      <section
47        id="showcase"
48        className="grid min-h-screen place-items-center px-6"
49      >
50        <div className="max-w-4xl rounded-[2rem] border border-white/10 bg-white/4 p-8 shadow-2xl shadow-black/40 backdrop-blur">
51          <p className="text-sm text-cyan-300">Showcase tools</p>
52
53          <h2 className="mt-3 text-4xl font-bold tracking-tight">
54            Preview tools that feel like components.
55          </h2>
56
57          <p className="mt-4 max-w-2xl text-sm leading-6 text-zinc-400">
58            Viewport previews, theme previews, focus overlays, and section
59            navigation help turn common workflow problems into reusable UI.
60          </p>
61        </div>
62      </section>
63
64      <section
65        id="pricing"
66        className="grid min-h-screen place-items-center px-6"
67      >
68        <div className="grid max-w-4xl gap-4 md:grid-cols-2">
69          <article className="rounded-3xl border border-white/10 bg-white/4 p-6">
70            <p className="text-sm text-zinc-400">Free</p>
71            <h2 className="mt-3 text-4xl font-bold">£0</h2>
72            <p className="mt-3 text-sm text-zinc-400">
73              Useful components and preview helpers.
74            </p>
75          </article>
76
77          <article className="rounded-3xl border border-cyan-400/30 bg-cyan-400/10 p-6 shadow-2xl shadow-cyan-950/30">
78            <p className="text-sm text-cyan-200">Pro</p>
79            <h2 className="mt-3 text-4xl font-bold">£9</h2>
80            <p className="mt-3 text-sm text-cyan-50/70">
81              Advanced showcase utilities, premium layouts, and richer
82              interaction components.
83            </p>
84          </article>
85        </div>
86      </section>
87
88      <section id="faq" className="grid min-h-screen place-items-center px-6">
89        <div className="max-w-2xl">
90          <p className="text-sm text-cyan-300">FAQ</p>
91
92          <h2 className="mt-3 text-4xl font-bold tracking-tight">
93            Built for real page workflows.
94          </h2>
95
96          <p className="mt-4 text-sm leading-6 text-zinc-400">
97            SectionNavigatorOverlay is useful for long landing pages, docs
98            pages, template previews, and product walkthroughs where users need
99            a quick way to jump between sections.
100          </p>
101        </div>
102      </section>
103    </main>
104  );
105}