A beautifully crafted folder with back panel, tab, front panel, and a subtle shine effect that opens smoothly on hover
import { AnimatedFolder } from "@/components/ui/3d-folder"
const portfolioData = [
{
title: "Branding",
projects: [
{ id: "1", image: "https://cdn.21st.dev/assets/mirror/c1/c1671df27042b5889c9813bf8e89b79fe2954b88fefb6b2e3c4cd78463289b48.jpg", title: "Lumnia" },
{ id: "2", image: "https://cdn.21st.dev/assets/mirror/67/677dbc17159d32becaf6209a1cc92022800d24cccbce2089e32fe5fe146464e3.jpg", title: "Prism" },
{ id: "3", image: "https://cdn.21st.dev/assets/mirror/b6/b61643bba150cf989b9fa16762d236dd89cb38121ecb53af6d05343d66153a0e.jpg", title: "Vertex" },
]
}
]
export default function Home() {
return (
<main className="min-h-screen bg-background flex items-center justify-center w-full">
{/* Main content */}
<section className="max-w-6xl mx-auto px-6 py-16">
<div className="flex items-center justify-center w-full">
{portfolioData.map((folder) => (
<AnimatedFolder key={folder.title} title={folder.title} projects={folder.projects} />
))}
</div>
</section>
</main>
)
}