Apply linen design system across app

src/app/page.tsx

@@ -3,8 +3,10 @@ import Image from "next/image";
 import Link from "next/link";
 import {
   ArrowRight,
+  Bell,
   CheckCircle2,
   ClipboardList,
+  Clock,
   DatabaseZap,
   FileStack,
   Fingerprint,
@@ -14,6 +16,7 @@ import {
   MessageSquareText,
   MessagesSquare,
   PhoneCall,
+  Search,
   Route,
   ShieldCheck,
   Table2,
@@ -72,7 +75,7 @@ const privacyPoints = [
   {
     icon: DatabaseZap,
     title: "Strikt isolierte Mandanten",
-    text: "Jede Kita arbeitet innerhalb ihrer eigenen kitaId-Grenze. Rollen und Datenabfragen bleiben konsequent tenant-isoliert.",
+    text: "Jede Kita arbeitet technisch streng getrennt pro Kita. Rollen und Datenabfragen bleiben konsequent tenant-isoliert.",
   },
   {
     icon: Fingerprint,
@@ -81,7 +84,7 @@ const privacyPoints = [
   },
   {
     icon: Trash2,
-    title: "Recht auf Vergessenwerden",
+    title: "Recht auf Löschung",
     text: "Eltern können ihren Account selbst löschen. Wenn sie der letzte Haushaltspartner sind, werden die Familiendaten sauber entfernt.",
   },
   {
@@ -112,26 +115,31 @@ const replacedTools = [
     icon: MessagesSquare,
     title: "WhatsApp für offizielle Infos",
     text: "Ankündigungen, Anhänge und Lesestatus gehören in einen verbindlichen Kanal, nicht zwischen spontane Rückfragen.",
+    accent: "bg-emerald-50 text-emerald-700 ring-emerald-100",
   },
   {
     icon: Table2,
     title: "Excel-Listen für Dienste",
     text: "Verfügbarkeiten, Mindesttage und Dienstpläne werden strukturierter als in Tabellen mit Version 17-final-final.",
+    accent: "bg-lime-50 text-lime-700 ring-lime-100",
   },
   {
     icon: FileStack,
     title: "Verstreute PDFs und Mail-Anhänge",
     text: "Wichtige Dokumente hängen am passenden Kontext und bleiben geschützt abrufbar.",
+    accent: "bg-red-50 text-red-700 ring-red-100",
   },
   {
     icon: ClipboardList,
     title: "Manuelle Kontaktlisten",
     text: "Familien, Kinder und freigegebene Kontaktdaten werden kontrolliert statt lose herumgereicht.",
+    accent: "bg-sky-50 text-sky-700 ring-sky-100",
   },
   {
     icon: PhoneCall,
     title: "Telefonchaos bei Krankmeldungen",
     text: "Eltern melden Abwesenheiten digital; das Team sieht morgens schneller, wer fehlt.",
+    accent: "bg-amber-50 text-amber-700 ring-amber-100",
   },
 ];
 
@@ -153,21 +161,28 @@ const audienceRoles = [
   },
 ];
 
+const onboardingTimeAnchors = [
+  "Demo-Call (30 Min)",
+  "Setup-Termin (1 Woche später)",
+  "Familien einladen (Woche 2)",
+  "Erste echte Dienstrunde (Woche 3–4)",
+] as const;
+
 const onboardingSteps = [
   {
-    title: "Demo anfragen",
+    title: onboardingTimeAnchors[0],
     text: "Ihr beschreibt kurz eure aktuelle Organisation und die größten Reibungspunkte.",
   },
   {
-    title: "Setup mit Kita und Vorstand klären",
+    title: onboardingTimeAnchors[1],
     text: "Wir schauen gemeinsam auf Rollen, Module, Datenschutzfragen und den sinnvollen Einstieg.",
   },
   {
-    title: "Familien einladen oder anlegen",
+    title: onboardingTimeAnchors[2],
     text: "Der Vorstand bringt Eltern, Kinder und Zuständigkeiten in eine saubere Struktur.",
   },
   {
-    title: "Module im Alltag nutzen",
+    title: onboardingTimeAnchors[3],
     text: "Dienste, Kalender, Krankmeldungen, Adressbuch und Schwarzes Brett ersetzen nach und nach Nebenkanäle.",
   },
 ];
@@ -267,6 +282,27 @@ export default function LandingPage() {
           </div>
         </section>
 
+        <section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-6 lg:py-24">
+          <div className="mb-10 grid gap-5 lg:grid-cols-[0.78fr_1fr] lg:items-end">
+            <div>
+              <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
+                Produkt statt Versprechen
+              </p>
+              <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
+                So sieht operative Kita-Arbeit aus, wenn sie nicht mehr im Chat
+                liegt.
+              </h2>
+            </div>
+            <p className="max-w-2xl text-sm leading-6 text-slate-600 lg:justify-self-end">
+              Der Notdienst-Planer sammelt Verfügbarkeiten, zeigt offene
+              Familien und macht aus losen Antworten einen veröffentlichbaren
+              Monatsplan.
+            </p>
+          </div>
+
+          <ProductBrowserMock />
+        </section>
+
         <section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-6 lg:py-24">
           <div className="mb-10 grid gap-5 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
             <div>
@@ -293,7 +329,9 @@ export default function LandingPage() {
                   key={item.title}
                   className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm"
                 >
-                  <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
+                  <div
+                    className={`mb-4 flex h-10 w-10 items-center justify-center rounded-lg ring-1 ${item.accent}`}
+                  >
                     <Icon className="h-5 w-5" />
                   </div>
                   <h3 className="font-semibold tracking-tight">{item.title}</h3>
@@ -409,6 +447,9 @@ export default function LandingPage() {
                       </Button>
                     </div>
                   </CardHeader>
+                  <CardContent className="pt-0">
+                    <FeaturePreview slug={feature.slug} />
+                  </CardContent>
                 </Card>
               );
             })}
@@ -593,3 +634,133 @@ export default function LandingPage() {
     </div>
   );
 }
+
+function ProductBrowserMock() {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-emerald-100 bg-white shadow-[0_24px_70px_rgba(15,23,42,0.12)]">
+      <div className="flex items-center justify-between border-b border-slate-200 bg-[#fbf8ef] px-4 py-3">
+        <div className="flex items-center gap-2">
+          <span className="h-3 w-3 rounded-full bg-red-300" />
+          <span className="h-3 w-3 rounded-full bg-amber-300" />
+          <span className="h-3 w-3 rounded-full bg-emerald-300" />
+        </div>
+        <div className="rounded-full border border-slate-200 bg-white px-4 py-1 text-xs font-medium text-slate-500">
+          app.kita-planer.de/dashboard/notdienst
+        </div>
+        <div className="w-16" />
+      </div>
+
+      <div className="bg-[#fbf8ef] p-2 sm:p-4">
+        <Image
+          src="/landing/notdienst-calendar-linen.png"
+          alt="Notdienst-Kalender im Kita-Planer mit ausgewählten Tagen im Juni 2026"
+          width={2262}
+          height={1640}
+          sizes="(min-width: 1280px) 1184px, calc(100vw - 40px)"
+          className="h-auto w-full rounded-xl border border-slate-200 bg-[#fbf8ef]"
+        />
+      </div>
+    </div>
+  );
+}
+
+function FeaturePreview({ slug }: { slug: string }) {
+  if (slug === "notdienst-planer") {
+    return (
+      <div className="rounded-xl border border-red-100 bg-[#fbf8ef] p-3">
+        <div className="mb-3 flex items-center justify-between text-xs">
+          <span className="font-semibold text-slate-700">Juni</span>
+          <span className="rounded-full bg-red-50 px-2 py-1 text-red-700">
+            12/16
+          </span>
+        </div>
+        <div className="grid grid-cols-5 gap-1.5">
+          {["", "bg-red-100", "", "bg-red-100", "", "bg-red-100", "", "", "bg-red-100", ""].map(
+            (cell, index) => (
+              <span
+                key={index}
+                className={`h-7 rounded-md border border-red-100 bg-white ${cell}`}
+              />
+            ),
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (slug === "kita-kalender") {
+    return (
+      <div className="rounded-xl border border-sky-100 bg-[#fbf8ef] p-3">
+        {[
+          ["10", "Schließtag", "bg-red-400"],
+          ["18", "Elternabend", "bg-indigo-400"],
+          ["29", "Sommerfest", "bg-emerald-500"],
+        ].map(([date, title, color]) => (
+          <div
+            key={title}
+            className="mb-2 last:mb-0 flex items-center gap-3 rounded-lg bg-white px-3 py-2 text-xs"
+          >
+            <span className="font-semibold tabular-nums text-slate-950">
+              {date}
+            </span>
+            <span className={`h-5 w-1 rounded-full ${color}`} />
+            <span className="text-slate-600">{title}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (slug === "eltern-adressbuch") {
+    return (
+      <div className="rounded-xl border border-emerald-100 bg-[#fbf8ef] p-3">
+        <div className="mb-3 flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs text-slate-400">
+          <Search className="h-3.5 w-3.5" />
+          Familie suchen
+        </div>
+        {["Meier", "Mustermann"].map((name) => (
+          <div key={name} className="mb-2 last:mb-0 flex items-center gap-2">
+            <span className="h-7 w-7 rounded-lg bg-emerald-50" />
+            <span className="h-2 flex-1 rounded-full bg-slate-200" />
+            <span className="h-2 w-10 rounded-full bg-emerald-100" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (slug === "krankmeldung") {
+    return (
+      <div className="rounded-xl border border-amber-100 bg-[#fbf8ef] p-3">
+        <div className="mb-3 flex items-center gap-2 text-xs font-semibold text-slate-700">
+          <Clock className="h-4 w-4 text-amber-700" />
+          Heute fehlen 2 Kinder
+        </div>
+        {["Kai · krank", "Mia · Arzttermin"].map((item) => (
+          <div
+            key={item}
+            className="mb-2 last:mb-0 rounded-lg bg-white px-3 py-2 text-xs text-slate-600"
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border border-indigo-100 bg-[#fbf8ef] p-3">
+      <div className="mb-3 flex items-center gap-2 text-xs font-semibold text-slate-700">
+        <Bell className="h-4 w-4 text-indigo-700" />
+        Neue Mitteilung
+      </div>
+      <div className="space-y-2">
+        <span className="block h-2.5 w-4/5 rounded-full bg-slate-200" />
+        <span className="block h-2.5 w-3/5 rounded-full bg-slate-200" />
+        <span className="inline-flex rounded-full bg-indigo-50 px-2 py-1 text-xs text-indigo-700">
+          PDF angehängt
+        </span>
+      </div>
+    </div>
+  );
+}