Ads.txt

app/ratgeber/page.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+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 rounded-3xl border border-line bg-surface p-6 shadow-soft transition-transform duration-200 hover:-translate-y-1">
+                <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>
+              </article>
+            ))}
+          </section>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}