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.
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export const Card = React.memo(
|
|
({
|
|
card,
|
|
index,
|
|
hovered,
|
|
setHovered,
|
|
}: {
|
|
card: any;
|
|
index: number;
|
|
hovered: number | null;
|
|
setHovered: React.Dispatch<React.SetStateAction<number | null>>;
|
|
}) => (
|
|
<div
|
|
onMouseEnter={() => setHovered(index)}
|
|
onMouseLeave={() => setHovered(null)}
|
|
className={cn(
|
|
"relative h-60 w-full overflow-hidden rounded-lg bg-gray-100 transition-all duration-300 ease-out md:h-96 dark:bg-neutral-900",
|
|
hovered !== null && hovered !== index && "scale-[0.98] blur-sm"
|
|
)}
|
|
>
|
|
<img src={card.src} alt={card.title} className="absolute inset-0 object-cover" />
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 flex items-end bg-black/50 px-4 py-8 transition-opacity duration-300",
|
|
hovered === index ? "opacity-100" : "opacity-0"
|
|
)}
|
|
>
|
|
<div className="bg-gradient-to-b from-neutral-50 to-neutral-200 bg-clip-text text-xl font-medium text-transparent md:text-2xl">
|
|
{card.title}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
|
|
Card.displayName = "Card";
|
|
|
|
type Card = {
|
|
title: string;
|
|
src: string;
|
|
};
|
|
|
|
export function FocusCards({ cards }: { cards: Card[] }) {
|
|
const [hovered, setHovered] = useState<number | null>(null);
|
|
|
|
return (
|
|
<div className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-10 md:grid-cols-3 md:px-8">
|
|
{cards.map((card, index) => (
|
|
<Card
|
|
key={card.title}
|
|
card={card}
|
|
index={index}
|
|
hovered={hovered}
|
|
setHovered={setHovered}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|