A tabbed stack of three portfolio project cards that rotates forward on click or arrow-key navigation, each with its own accent color, artwork and external link.
import ProjectStack from "@/components/ui/project-stack";
export default function ProjectStackDemo() {
return (
<div
className="flex min-h-screen w-full items-center justify-center p-10"
style={{
background: "radial-gradient(ellipse at 50% 40%, #22232a, #0e1014 65%)",
}}
>
<ProjectStack
items={[
{
title: "Orbit",
tag: "BRAND & WEB",
description: "A home for your next big idea.",
href: "https://example.com/#orbit",
accent: "#7ee0b8",
},
{
title: "Forma",
tag: "DESIGN SYSTEM",
description: "A small system for making things feel consistent.",
href: "https://example.com/#forma",
},
{
title: "Echo",
tag: "DIGITAL PRODUCT",
description: "A quieter place for your favourite sounds.",
href: "https://example.com/#echo",
},
]}
/>
</div>
);
}