SEO blogpost V2

components/contextual-guide-link.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import type { Guide } from "@/lib/guides";
+import { getGuide } from "@/lib/guides";
+
+export default function ContextualGuideLink({ guide, sectionHeading }: { guide: Guide; sectionHeading: string }) {
+  if (guide.contextualLink.afterSection !== sectionHeading) return null;
+
+  const relatedGuide = getGuide(guide.contextualLink.guideSlug);
+  if (!relatedGuide) return null;
+
+  return (
+    <p className="mt-5 border-l-2 border-[#0d7a57]/30 pl-4 text-base leading-relaxed text-ink-soft">
+      {guide.contextualLink.lead}{" "}
+      <Link href={`/ratgeber/${relatedGuide.slug}`} className="font-semibold text-[#0d7a57] underline decoration-[#0d7a57]/30 underline-offset-4 hover:text-[#095c41]">
+        {relatedGuide.title}
+      </Link>
+    </p>
+  );
+}

components/related-guide-articles.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import type { Guide } from "@/lib/guides";
+import { getGuide } from "@/lib/guides";
+
+export default function RelatedGuideArticles({ guide }: { guide: Guide }) {
+  const relatedGuides = guide.relatedGuides
+    .map((slug) => getGuide(slug))
+    .filter((related): related is Guide => Boolean(related));
+
+  if (relatedGuides.length === 0) return null;
+
+  return (
+    <aside className="mt-12 rounded-3xl border border-line bg-surface p-6 shadow-soft">
+      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Weiterlesen</p>
+      <h2 className="mt-3 font-display text-2xl font-semibold text-ink">Das könnte dich auch interessieren</h2>
+      <div className="mt-5 grid gap-4 sm:grid-cols-2">
+        {relatedGuides.map((related) => (
+          <Link
+            key={related.slug}
+            href={`/ratgeber/${related.slug}`}
+            className="rounded-2xl border border-line p-4 transition-colors hover:border-[#0d7a57]/40 hover:bg-[#e6f7f0]/40"
+          >
+            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#0d7a57]">{related.readingTime}</p>
+            <h3 className="mt-2 font-display text-xl font-semibold leading-tight text-ink">{related.title}</h3>
+            <p className="mt-2 text-sm leading-relaxed text-ink-soft">{related.excerpt}</p>
+          </Link>
+        ))}
+      </div>
+    </aside>
+  );
+}