54 lines
2.8 KiB
TypeScript
54 lines
2.8 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Nav from "@/components/nav";
|
|
import Footer from "@/components/footer";
|
|
import { GUIDES } from "@/lib/guides";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Ratgeber für kleine Entscheidungen",
|
|
description:
|
|
"Praktische, kostenlose Ratgeber zu Zufall, fairen Auslosungen und kleinen Alltagsentscheidungen.",
|
|
alternates: { canonical: "/ratgeber" },
|
|
};
|
|
|
|
export default function GuideIndexPage() {
|
|
return (
|
|
<>
|
|
<Nav />
|
|
<main className="flex-1 bg-paper pb-20 pt-28 sm:pt-32">
|
|
<div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
|
|
<header className="max-w-3xl">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Ratgeber</p>
|
|
<h1 className="mt-4 text-balance font-display text-5xl font-semibold leading-[0.95] tracking-[-0.045em] text-ink sm:text-6xl">
|
|
Kleine Entscheidungen, klarer gedacht.
|
|
</h1>
|
|
<p className="mt-6 max-w-2xl text-lg leading-relaxed text-ink-soft">
|
|
Praktische Hinweise für spielerische Alltagsentscheidungen, faire Auslosungen und den bewussten Umgang mit Zufall.
|
|
</p>
|
|
</header>
|
|
<section className="mt-14 grid gap-5 md:grid-cols-3" aria-label="Ratgeberartikel">
|
|
{GUIDES.map((guide) => (
|
|
<article key={guide.slug} className="flex flex-col overflow-hidden rounded-3xl border border-line bg-surface shadow-soft transition-transform duration-200 hover:-translate-y-1">
|
|
<Link href={`/ratgeber/${guide.slug}`} className="relative block aspect-[3/2] overflow-hidden" tabIndex={-1} aria-hidden="true">
|
|
<Image src={guide.image.src} alt="" fill sizes="(min-width: 768px) 33vw, 100vw" className="object-cover transition-transform duration-500 hover:scale-105" />
|
|
</Link>
|
|
<div className="flex flex-1 flex-col p-6">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#0d7a57]">{guide.readingTime}</p>
|
|
<h2 className="mt-4 font-display text-3xl font-semibold leading-tight text-ink">{guide.title}</h2>
|
|
<p className="mt-4 flex-1 leading-relaxed text-ink-soft">{guide.excerpt}</p>
|
|
<p className="mt-6 text-sm text-ink-soft">Veröffentlicht am {guide.published}</p>
|
|
<Link href={`/ratgeber/${guide.slug}`} className="mt-5 font-semibold text-[#0d7a57] underline decoration-[#0d7a57]/30 underline-offset-4 transition-colors hover:text-[#095c41]">
|
|
Artikel lesen <span aria-hidden>→</span>
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|