79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
import Link from "next/link";
|
|
import { getStories } from "@/data/creativeData";
|
|
import ExpandableStory from "@/components/ExpandableStory";
|
|
|
|
export default async function StoriesPage() {
|
|
const stories = await getStories();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 font-mono">
|
|
<div className="max-w-4xl mx-auto px-6 py-12">
|
|
<header className="text-center mb-16">
|
|
<div className="mb-8">
|
|
<div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-yellow-300">
|
|
<div className="text-4xl font-bold text-yellow-300">📝</div>
|
|
</div>
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
|
|
Mini Stories
|
|
</h1>
|
|
<p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
|
|
Capturing moments in brief narratives
|
|
</p>
|
|
</header>
|
|
|
|
<nav className="mb-16">
|
|
<div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
|
|
<ul className="flex flex-wrap justify-center gap-4 md:gap-8">
|
|
<li>
|
|
<Link
|
|
href="/"
|
|
className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
|
|
>
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/digital-art"
|
|
className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
|
|
>
|
|
Digital Art
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/stories"
|
|
className="border-yellow-200 bg-yellow-300 px-4 py-2 border-2 text-black"
|
|
>
|
|
Stories
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/thoughts"
|
|
className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
|
|
>
|
|
Thoughts
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="space-y-8">
|
|
{stories.map((story) => (
|
|
<ExpandableStory key={story.id} story={story} />
|
|
))}
|
|
</main>
|
|
|
|
<footer className="mt-20 text-center">
|
|
<div className="bg-black text-white p-4 font-bold">
|
|
<p className="text-sm uppercase">Built with brutalist pastels</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|