Ads.txt

2026-08-03 10:27:15 +02:00
parent d8aba6925f
commit 8cf2ce1b21
10 changed files with 386 additions and 7 deletions
--- a/app/ratgeber/[slug]/page.tsx
+++ b/app/ratgeber/[slug]/page.tsx
@@ -0,0 +1,100 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import Nav from "@/components/nav";
+import Footer from "@/components/footer";
+import { getGuide, GUIDES } from "@/lib/guides";
+
+const SITE_URL = "https://entscheidomat.com";
+
+export function generateStaticParams() {
+  return GUIDES.map(({ slug }) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: PageProps<"/ratgeber/[slug]">): Promise<Metadata> {
+  const { slug } = await params;
+  const guide = getGuide(slug);
+  if (!guide) return {};
+
+  return {
+    title: guide.title,
+    description: guide.description,
+    alternates: { canonical: `/ratgeber/${guide.slug}` },
+    openGraph: {
+      type: "article",
+      locale: "de_DE",
+      url: `${SITE_URL}/ratgeber/${guide.slug}`,
+      title: guide.title,
+      description: guide.description,
+      publishedTime: "2026-08-03T08:00:00+02:00",
+      modifiedTime: "2026-08-03T08:00:00+02:00",
+    },
+  };
+}
+
+export default async function GuidePage({ params }: PageProps<"/ratgeber/[slug]">) {
+  const { slug } = await params;
+  const guide = getGuide(slug);
+  if (!guide) notFound();
+
+  const url = `${SITE_URL}/ratgeber/${guide.slug}`;
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: guide.title,
+    description: guide.description,
+    datePublished: "2026-08-03",
+    dateModified: "2026-08-03",
+    inLanguage: "de-DE",
+    mainEntityOfPage: url,
+    author: { "@type": "Person", name: "Timo Knuth" },
+    publisher: { "@type": "Organization", name: "Entscheidomat", url: SITE_URL },
+  };
+
+  return (
+    <>
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
+      <Nav />
+      <main className="flex-1 bg-paper pb-20 pt-28 sm:pt-32">
+        <article className="mx-auto w-full max-w-3xl px-5 sm:px-8">
+          <nav aria-label="Breadcrumb" className="text-sm text-ink-soft">
+            <Link href="/" className="hover:text-[#0d7a57]">Entscheidomat</Link>
+            <span aria-hidden className="px-2">/</span>
+            <Link href="/ratgeber" className="hover:text-[#0d7a57]">Ratgeber</Link>
+          </nav>
+          <header className="mt-8 border-b border-line pb-10">
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">{guide.readingTime}</p>
+            <h1 className="mt-4 text-balance font-display text-5xl font-semibold leading-[0.95] tracking-[-0.045em] text-ink sm:text-6xl">{guide.title}</h1>
+            <p className="mt-6 text-lg leading-relaxed text-ink-soft">{guide.description}</p>
+            <p className="mt-6 text-sm text-ink-soft">Von Timo Knuth · Veröffentlicht und aktualisiert am {guide.updated}</p>
+          </header>
+          <div className="mt-10 space-y-10 text-[1.0625rem] leading-8 text-ink-soft">
+            {guide.sections.map((section) => (
+              <section key={section.heading}>
+                <h2 className="font-display text-3xl font-semibold leading-tight text-ink">{section.heading}</h2>
+                <div className="mt-4 space-y-4">
+                  {section.paragraphs.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
+                </div>
+                {section.bullets && (
+                  <ul className="mt-5 space-y-3 border-l-2 border-[#0d7a57]/30 pl-5">
+                    {section.bullets.map((bullet) => <li key={bullet}>{bullet}</li>)}
+                  </ul>
+                )}
+              </section>
+            ))}
+          </div>
+          <aside className="mt-12 rounded-3xl border border-emerald-line bg-emerald-soft p-6 text-ink">
+            <h2 className="font-display text-2xl font-semibold">Passendes Tool auswählen</h2>
+            <p className="mt-2 leading-relaxed text-ink-soft">Für spielerische, folgenarme Entscheidungen kannst du die kostenlosen Tools direkt im Browser nutzen – ohne Anmeldung.</p>
+            <div className="mt-4 flex flex-wrap gap-4 text-sm font-semibold text-[#0d7a57]">
+              <Link href="/muenze-werfen" className="hover:underline">Münze werfen</Link>
+              <Link href="/gluecksrad" className="hover:underline">Glücksrad</Link>
+              <Link href="/namen-auslosen" className="hover:underline">Namen auslosen</Link>
+            </div>
+          </aside>
+        </article>
+      </main>
+      <Footer />
+    </>
+  );
+}