55 lines
2 KiB
TypeScript
55 lines
2 KiB
TypeScript
|
import { For } from "solid-js";
|
||
|
|
import { usePageMeta } from "@/lib/meta";
|
||
|
|
import { timeline, timelinePage } from "@/data/timeline";
|
||
|
|
|
||
|
|
export default function TimelinePage() {
|
||
|
|
usePageMeta(timelinePage.metadata.title as string, timelinePage.metadata.description as string);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main class="min-h-screen bg-deep-space">
|
||
|
|
<section class="pt-32 pb-20 px-[5vw] bg-charcoal">
|
||
|
|
<div class="max-w-[1200px] mx-auto space-y-6">
|
||
|
|
<p class="section-label">{timelinePage.label}</p>
|
||
|
|
<h1
|
||
|
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||
|
|
style={{ "font-size": "clamp(2.5rem, 8vw, 5rem)" }}
|
||
|
|
>
|
||
|
|
{timelinePage.pageTitle}
|
||
|
|
</h1>
|
||
|
|
<p class="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
||
|
|
{timelinePage.subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="py-20 md:py-32 px-[5vw]">
|
||
|
|
<div class="max-w-[1200px] mx-auto space-y-16">
|
||
|
|
<For each={timeline}>
|
||
|
|
{(item) => (
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-[120px_1fr] gap-8 border-t border-warm-grey pt-12">
|
||
|
|
<span class="font-mono text-amber text-xl">{item.year}</span>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<h2 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
||
|
|
{item.title}
|
||
|
|
</h2>
|
||
|
|
<p class="text-text-secondary leading-relaxed">
|
||
|
|
{item.description}
|
||
|
|
</p>
|
||
|
|
<p class="text-text-secondary leading-relaxed">
|
||
|
|
{timelinePage.detailText}
|
||
|
|
</p>
|
||
|
|
<div class="flex flex-wrap gap-2 pt-2">
|
||
|
|
<For each={item.tags}>
|
||
|
|
{(tag) => <span class="chip">{tag}</span>}
|
||
|
|
</For>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</For>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|