added more page content

src/app/features/[slug]/page.tsx

@@ -0,0 +1,327 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import {
+  ArrowLeft,
+  ArrowRight,
+  CheckCircle2,
+  HelpCircle,
+  ShieldCheck,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  getMarketingFeature,
+  marketingFeatures,
+} from "@/lib/marketing/features";
+
+type FeaturePageProps = {
+  params: Promise<{
+    slug: string;
+  }>;
+};
+
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return marketingFeatures.map((feature) => ({
+    slug: feature.slug,
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: FeaturePageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const feature = getMarketingFeature(slug);
+
+  if (!feature) {
+    return {
+      title: "Feature nicht gefunden",
+    };
+  }
+
+  return {
+    title: feature.seoTitle,
+    description: feature.seoDescription,
+    openGraph: {
+      title: feature.seoTitle,
+      description: feature.seoDescription,
+      type: "website",
+      locale: "de_DE",
+      images: [
+        {
+          url: "/og-image.png",
+          width: 1200,
+          height: 630,
+          alt: "Ein Kind spielt mit bunten Holzklötzen.",
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: feature.seoTitle,
+      description: feature.seoDescription,
+      images: ["/og-image.png"],
+    },
+  };
+}
+
+export default async function FeaturePage({ params }: FeaturePageProps) {
+  const { slug } = await params;
+  const feature = getMarketingFeature(slug);
+
+  if (!feature) {
+    notFound();
+  }
+
+  const Icon = feature.icon;
+
+  return (
+    <div className="min-h-screen bg-[#f8faf8] text-slate-950">
+      <header className="border-b border-slate-200 bg-white/95">
+        <div className="mx-auto flex h-20 w-full max-w-7xl items-center justify-between px-5 sm:px-6">
+          <Link href="/" className="flex items-center gap-3 text-slate-950">
+            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-950 text-white">
+              <ShieldCheck className="h-5 w-5" />
+            </span>
+            <span className="text-base font-semibold tracking-tight">
+              Kita-Planer
+            </span>
+          </Link>
+
+          <nav className="flex items-center gap-2">
+            <Button asChild variant="ghost">
+              <Link href="/login">Login</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/#kontakt">Demo anfragen</Link>
+            </Button>
+          </nav>
+        </div>
+      </header>
+
+      <main>
+        <section className="bg-slate-950 px-5 py-20 text-white sm:px-6 lg:py-24">
+          <div className="mx-auto grid w-full max-w-7xl gap-12 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
+            <div>
+              <Button
+                asChild
+                variant="ghost"
+                className="-ml-3 mb-8 text-slate-300 hover:bg-white/10 hover:text-white"
+              >
+                <Link href="/">
+                  <ArrowLeft className="h-4 w-4" />
+                  Zur Startseite
+                </Link>
+              </Button>
+
+              <Badge className="mb-6 border-white/15 bg-white/10 text-white hover:bg-white/10">
+                {feature.eyebrow}
+              </Badge>
+              <h1 className="max-w-4xl text-balance text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl">
+                {feature.heroTitle}
+              </h1>
+              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
+                {feature.heroDescription}
+              </p>
+              <div className="mt-9 flex flex-col gap-3 sm:flex-row">
+                <Button
+                  asChild
+                  size="lg"
+                  className="h-12 bg-white px-6 text-slate-950 hover:bg-white/90"
+                >
+                  <Link href="/#kontakt">
+                    Demo anfragen
+                    <ArrowRight className="h-4 w-4" />
+                  </Link>
+                </Button>
+                <Button
+                  asChild
+                  size="lg"
+                  variant="outline"
+                  className="h-12 border-white/35 bg-white/10 px-6 text-white hover:bg-white/20 hover:text-white"
+                >
+                  <Link href="/register">Kita registrieren</Link>
+                </Button>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-white/10 bg-white/[0.06] p-6 shadow-2xl shadow-slate-950/30">
+              <div
+                className={`mb-6 flex h-14 w-14 items-center justify-center rounded-lg ring-1 ${feature.accent}`}
+              >
+                <Icon className="h-7 w-7" />
+              </div>
+              <p className="text-sm font-semibold uppercase tracking-wide text-emerald-200">
+                In einem Satz
+              </p>
+              <p className="mt-4 text-2xl font-semibold leading-snug">
+                {feature.description}
+              </p>
+              <div className="mt-8 grid gap-3 text-sm text-slate-300">
+                {feature.benefits.slice(0, 3).map((benefit) => (
+                  <div key={benefit.title} className="flex items-start gap-2">
+                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-300" />
+                    <span>{benefit.title}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="mx-auto grid w-full max-w-7xl gap-6 px-5 py-20 sm:px-6 lg:grid-cols-2">
+          <Card className="border-slate-200 bg-white">
+            <CardHeader>
+              <CardTitle className="text-2xl tracking-tight">
+                {feature.problemTitle}
+              </CardTitle>
+              <CardDescription className="text-base leading-7 text-slate-600">
+                {feature.problemText}
+              </CardDescription>
+            </CardHeader>
+          </Card>
+
+          <Card className="border-slate-200 bg-white">
+            <CardHeader>
+              <CardTitle className="text-2xl tracking-tight">
+                {feature.solutionTitle}
+              </CardTitle>
+              <CardDescription className="text-base leading-7 text-slate-600">
+                {feature.solutionText}
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </section>
+
+        <section className="px-5 pb-20 sm:px-6">
+          <div className="mx-auto w-full max-w-7xl">
+            <div className="mb-10 max-w-3xl">
+              <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
+                Was das konkret bringt
+              </p>
+              <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
+                Weniger Abstimmungslast, mehr Klarheit im Kita-Alltag.
+              </h2>
+            </div>
+
+            <div className="grid gap-5 md:grid-cols-2">
+              {feature.benefits.map((benefit) => (
+                <Card key={benefit.title} className="border-slate-200 bg-white">
+                  <CardHeader>
+                    <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
+                      <CheckCircle2 className="h-5 w-5" />
+                    </div>
+                    <CardTitle className="text-xl tracking-tight">
+                      {benefit.title}
+                    </CardTitle>
+                    <CardDescription className="text-sm leading-6 text-slate-600">
+                      {benefit.text}
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className="bg-slate-950 px-5 py-18 text-white sm:px-6">
+          <div className="mx-auto flex w-full max-w-7xl flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
+            <div className="max-w-3xl">
+              <Badge className="mb-5 border-emerald-300/20 bg-emerald-300/10 text-emerald-100 hover:bg-emerald-300/10">
+                Vertrauen & Datenschutz
+              </Badge>
+              <h2 className="text-3xl font-semibold tracking-tight">
+                {feature.trustTitle}
+              </h2>
+              <p className="mt-4 text-base leading-7 text-slate-300">
+                {feature.trustText}
+              </p>
+            </div>
+            <Button
+              asChild
+              size="lg"
+              className="h-12 bg-white px-6 text-slate-950 hover:bg-white/90 lg:shrink-0"
+            >
+              <Link href="/datenschutz">Datenschutz ansehen</Link>
+            </Button>
+          </div>
+        </section>
+
+        <section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-6">
+          <div className="mb-10 max-w-3xl">
+            <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
+              Fragen aus dem Vorstand
+            </p>
+            <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
+              Kurz beantwortet.
+            </h2>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-3">
+            {feature.faqs.map((faq) => (
+              <Card key={faq.question} className="border-slate-200 bg-white">
+                <CardHeader>
+                  <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100 text-slate-700">
+                    <HelpCircle className="h-5 w-5" />
+                  </div>
+                  <CardTitle className="text-lg leading-snug">
+                    {faq.question}
+                  </CardTitle>
+                  <CardDescription className="text-sm leading-6 text-slate-600">
+                    {faq.answer}
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+        </section>
+
+        <section className="px-5 pb-20 sm:px-6">
+          <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 rounded-lg border border-slate-200 bg-white p-8 shadow-sm sm:p-10 md:flex-row md:items-center md:justify-between">
+            <div className="max-w-2xl">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                Wollt ihr {feature.shortTitle} im echten Kita-Alltag sehen?
+              </h2>
+              <p className="mt-3 text-sm leading-6 text-slate-600">
+                Schreibt uns kurz, wie ihr heute organisiert seid. Wir zeigen
+                euch, wie Kita-Planer zu eurem Elternverein passen kann.
+              </p>
+            </div>
+            <Button asChild size="lg">
+              <Link href="/#kontakt">
+                Demo anfragen
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+          </div>
+        </section>
+      </main>
+
+      <footer className="border-t border-slate-200 bg-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-5 py-8 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+          <span>© {new Date().getFullYear()} Kita-Planer</span>
+          <nav className="flex gap-5">
+            <Link href="/impressum" className="hover:text-slate-950">
+              Impressum
+            </Link>
+            <Link href="/datenschutz" className="hover:text-slate-950">
+              Datenschutz
+            </Link>
+            <Link href="/#kontakt" className="hover:text-slate-950">
+              Kontakt
+            </Link>
+          </nav>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/page.tsx

@@ -3,19 +3,14 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
   ArrowRight,
-  CalendarDays,
   CheckCircle2,
   DatabaseZap,
   Fingerprint,
   LockKeyhole,
   Mail,
-  Megaphone,
   MessageSquareText,
-  ShieldAlert,
   ShieldCheck,
-  Stethoscope,
   Trash2,
-  UsersRound,
 } from "lucide-react";
 
 import { auth } from "@/auth";
@@ -28,6 +23,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { marketingFeatures } from "@/lib/marketing/features";
 import { ContactForm } from "./contact-form";
 
 export const metadata: Metadata = {
@@ -61,46 +57,6 @@ export const metadata: Metadata = {
 const heroImage =
   "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?auto=format&fit=crop&w=2400&q=86";
 
-const features = [
-  {
-    icon: ShieldAlert,
-    title: "Fairer Notdienst-Planer",
-    description:
-      "Automatische Generierung, gerechte Verteilung und 1-Klick-Alarmierung, wenn morgens Ersatz gebraucht wird.",
-    accent: "bg-red-50 text-red-700 ring-red-100",
-  },
-  {
-    icon: CalendarDays,
-    title: "Smarter Kalender",
-    description:
-      "Feste, Termine, Raumbuchungen und digitale Mitbring-Listen in einem verbindlichen Kalender für alle Familien.",
-    accent: "bg-sky-50 text-sky-700 ring-sky-100",
-  },
-  {
-    icon: UsersRound,
-    title: "Sicheres Adressbuch",
-    description:
-      "Haushaltsbasiert, DSGVO-konform und mit strengem Opt-In: Kontaktdaten werden nur sichtbar, wenn Eltern zustimmen.",
-    accent: "bg-emerald-50 text-emerald-700 ring-emerald-100",
-  },
-  {
-    icon: Stethoscope,
-    title: "Digitale Krankmeldung",
-    description:
-      "Ein Klick statt Dauerläuten am Morgen. Eltern melden Kinder digital ab, ErzieherInnen sehen auf dem Tablet sofort den Überblick für den Morgenkreis.",
-    accent: "bg-amber-50 text-amber-700 ring-amber-100",
-    badge: "Neu",
-  },
-  {
-    icon: Megaphone,
-    title: "Schwarzes Brett",
-    description:
-      "Der WhatsApp-Killer für Vorstände: offizielle Ankündigungen mit Dateianhängen, Lesebestätigung und optionalem E-Mail-Push.",
-    accent: "bg-indigo-50 text-indigo-700 ring-indigo-100",
-    badge: "Neu",
-  },
-];
-
 const privacyPoints = [
   {
     icon: DatabaseZap,
@@ -246,7 +202,7 @@ export default async function LandingPage() {
           </div>
 
           <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-6">
-            {features.map((feature, index) => {
+            {marketingFeatures.map((feature, index) => {
               const Icon = feature.icon;
               const isWide = index > 2;
               return (
@@ -276,6 +232,16 @@ export default async function LandingPage() {
                       <CardDescription className="mt-3 text-sm leading-6 text-slate-600">
                         {feature.description}
                       </CardDescription>
+                      <Button
+                        asChild
+                        variant="link"
+                        className="mt-4 h-auto p-0 text-slate-950"
+                      >
+                        <Link href={`/features/${feature.slug}`}>
+                          Mehr erfahren
+                          <ArrowRight className="h-4 w-4" />
+                        </Link>
+                      </Button>
                     </div>
                   </CardHeader>
                 </Card>

src/app/robots.ts

@@ -10,7 +10,7 @@ export default function robots(): MetadataRoute.Robots {
   return {
     rules: {
       userAgent: "*",
-      allow: ["/", "/impressum", "/datenschutz"],
+      allow: ["/", "/features/", "/impressum", "/datenschutz"],
       disallow: [
         "/api/",
         "/dashboard/",

src/app/sitemap.ts

@@ -1,5 +1,7 @@
 import type { MetadataRoute } from "next";
 
+import { marketingFeatures } from "@/lib/marketing/features";
+
 function getSiteUrl() {
   return process.env.NEXT_PUBLIC_SITE_URL ?? "https://mein-kitaplaner.de";
 }
@@ -27,5 +29,11 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "yearly",
       priority: 0.2,
     },
+    ...marketingFeatures.map((feature) => ({
+      url: `${siteUrl}/features/${feature.slug}`,
+      lastModified,
+      changeFrequency: "monthly" as const,
+      priority: 0.8,
+    })),
   ];
 }