asepharyana
bf75d9deef
Vendor 50 Aceternity UI components into components/ui from the official registry (ui.aceternity.com/registry/<slug>.json), adapted for this template's stack: Tailwind v4, motion/react 13, cn util, React 19. Add a live showcase gallery (/ui + /docs/... navigation is unchanged): app/ui/page.tsx renders <ShowcaseGallery> with 30+ demos — 3d-pin, aurora, background-beams, bento, card-stack, card-spotlight, direction-aware-hover, encrypted-text, evervault-card, flip-words, hero-highlight, hero-parallax, infinite-moving-cards, moving-border, sparkles, tracing-beam, animated-tooltip, typewriter-effect, placeholders-and-vanish-input and friends. Toolchain stays zero-warning: vendored animation code is scoped in eslint.config.mjs (react-hooks/react-compiler advisory rules, no-any, prefer-const, no-img-element) so app code keeps a 0-error gate. typecheck, build, 7 vitest tests and 2 test suites all green.
74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import { Suspense } from "react";
|
|
import Link from "next/link";
|
|
import type { Metadata } from "next";
|
|
import { ShowcaseGallery } from "@/components/showcase/gallery";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "UI Gallery — Aceternity",
|
|
description:
|
|
"Fifty-two Aceternity UI components vendored into the template — animated cards, beams, backgrounds, pins, marquees and more, wired for the App Router.",
|
|
};
|
|
|
|
const SECTIONS = [
|
|
"3D Pin / Marquee",
|
|
"Backgrounds & Beams",
|
|
"Cards & Hover",
|
|
"Text Effects",
|
|
"Inputs & Buttons",
|
|
];
|
|
|
|
export default function UiGalleryPage() {
|
|
return (
|
|
<div className="flex w-full flex-col items-center bg-zinc-50 dark:bg-black">
|
|
<div className="w-full border-b border-zinc-200 bg-white/80 py-10 backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-950/80">
|
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-3 px-6">
|
|
<nav className="text-xs font-medium tracking-wide text-zinc-500 dark:text-zinc-400">
|
|
<Link
|
|
href="/"
|
|
className="transition-colors hover:text-zinc-900 dark:hover:text-zinc-100"
|
|
>
|
|
Home
|
|
</Link>
|
|
<span className="px-2">/</span>
|
|
<span className="text-zinc-800 dark:text-zinc-200">UI Gallery</span>
|
|
</nav>
|
|
<h1 className="text-3xl font-semibold tracking-tight text-balance text-zinc-900 sm:text-4xl dark:text-zinc-50">
|
|
Aceternity UI gallery
|
|
</h1>
|
|
<p className="max-w-2xl text-sm leading-6 text-zinc-600 dark:text-zinc-400">
|
|
50 components vendored straight from the{" "}
|
|
<a
|
|
href="https://ui.aceternity.com/components"
|
|
className="font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-4 hover:decoration-zinc-500 dark:text-zinc-200 dark:decoration-zinc-600"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Aceternity registry
|
|
</a>{" "}
|
|
and wired for this template. Everything below is live — hover, click and scroll.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2 pt-1">
|
|
{SECTIONS.map((s) => (
|
|
<a
|
|
key={s}
|
|
href={`#${s.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`}
|
|
className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-300 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400 dark:hover:border-zinc-700 dark:hover:text-zinc-100"
|
|
>
|
|
{s}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main className="w-full max-w-6xl flex-1 px-6 py-12">
|
|
<Suspense
|
|
fallback={<div className="py-24 text-center text-sm text-zinc-400">Loading gallery…</div>}
|
|
>
|
|
<ShowcaseGallery />
|
|
</Suspense>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|