Tighten landing page positioning

src/app/page.tsx

@@ -5,13 +5,22 @@ import { redirect } from "next/navigation";
 import {
   ArrowRight,
   CheckCircle2,
+  ClipboardList,
   DatabaseZap,
+  FileStack,
   Fingerprint,
+  HeartHandshake,
   LockKeyhole,
   Mail,
   MessageSquareText,
+  MessagesSquare,
+  PhoneCall,
+  Route,
   ShieldCheck,
+  Table2,
   Trash2,
+  UserCog,
+  UsersRound,
 } from "lucide-react";
 
 import { auth } from "@/auth";
@@ -29,13 +38,13 @@ import { marketingFeatures } from "@/lib/marketing/features";
 import { ContactForm } from "./contact-form";
 
 export const metadata: Metadata = {
-  title: "Kita-Planer für Elternvereine",
+  title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
   description:
-    "Die einfache Plattform für Elternvereine, Dienste und Kommunikation: plant Dienste, teilt Neuigkeiten und behaltet Termine gemeinsam im Blick.",
+    "Die einfache Plattform für Elterninitiativen, freie Kitas und Kita-Vereine: organisiert Dienste, Termine, Krankmeldungen und offizielle Kommunikation an einem Ort.",
   openGraph: {
-    title: "Kita-Planer für Elternvereine",
+    title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
     description:
-      "Plant Dienste, teilt Neuigkeiten und behaltet Termine gemeinsam im Blick.",
+      "Weniger Chat-Chaos, weniger Excel-Listen, mehr Ruhe im ehrenamtlichen Kita-Alltag.",
     type: "website",
     locale: "de_DE",
     images: [
@@ -49,9 +58,9 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: "summary_large_image",
-    title: "Kita-Planer für Elternvereine",
+    title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
     description:
-      "Plant Dienste, teilt Neuigkeiten und behaltet Termine gemeinsam im Blick.",
+      "Organisiert Dienste, Termine, Krankmeldungen und offizielle Kommunikation an einem Ort.",
     images: ["/og-image.png"],
   },
 };
@@ -63,11 +72,11 @@ const privacyPoints = [
   {
     icon: DatabaseZap,
     title: "Strikt isolierte Mandanten",
-    text: "Jede Kita arbeitet innerhalb ihrer eigenen kitaId-Grenze. Datenabfragen sind konsequent tenant-isoliert.",
+    text: "Jede Kita arbeitet innerhalb ihrer eigenen kitaId-Grenze. Rollen und Datenabfragen bleiben konsequent tenant-isoliert.",
   },
   {
     icon: Fingerprint,
-    title: "Privacy by Design",
+    title: "Kontaktfreigabe per Opt-in",
     text: "Adressbuchdaten erscheinen nur nach aktivem Opt-In pro Elternteil. Nicht freigegebene Kontaktdaten verlassen den Server nicht.",
   },
   {
@@ -80,12 +89,87 @@ const privacyPoints = [
     title: "Geschützte Anhänge",
     text: "Dokumente vom Schwarzen Brett liegen nicht öffentlich und werden nur nach Session- und Kita-Prüfung ausgeliefert.",
   },
+  {
+    icon: UserCog,
+    title: "Rollenrechte pro Kita",
+    text: "Vorstand, Koordination, Eltern und Team sehen nur die Bereiche, die zu ihrer Aufgabe und Kita-Zugehörigkeit passen.",
+  },
+  {
+    icon: FileStack,
+    title: "Klare Datenpfade",
+    text: "Löschungen sind bewusst vorgesehen; Fragen zu Export und Übergabe werden im Setup sauber geklärt.",
+  },
 ];
 
 const proofPoints = [
-  "Notdienst, Kalender und Abwesenheiten in einem System",
+  "Für Elterninitiativen, freie Kitas und Kita-Vereine",
-  "Gebaut für Vorstände, Eltern und ErzieherInnen",
+  "Dienste, Kalender, Abwesenheiten und offizielle Infos in einem System",
-  "Klare Rollenrechte statt Chat-Chaos",
+  "Gebaut für Vorstände, Eltern, Koordination und Team",
+];
+
+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.",
+  },
+  {
+    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.",
+  },
+  {
+    icon: FileStack,
+    title: "Verstreute PDFs und Mail-Anhänge",
+    text: "Wichtige Dokumente hängen am passenden Kontext und bleiben geschützt abrufbar.",
+  },
+  {
+    icon: ClipboardList,
+    title: "Manuelle Kontaktlisten",
+    text: "Familien, Kinder und freigegebene Kontaktdaten werden kontrolliert statt lose herumgereicht.",
+  },
+  {
+    icon: PhoneCall,
+    title: "Telefonchaos bei Krankmeldungen",
+    text: "Eltern melden Abwesenheiten digital; das Team sieht morgens schneller, wer fehlt.",
+  },
+];
+
+const audienceRoles = [
+  {
+    icon: UserCog,
+    title: "Vorstand & Admin",
+    text: "Kita, Familien, Termine, Einladungen und Rechte verwalten, ohne dass alles an einer privaten Ablage hängt.",
+  },
+  {
+    icon: UsersRound,
+    title: "Eltern",
+    text: "Termine sehen, Kinder krankmelden, Verfügbarkeiten eintragen und freigegebene Kontakte finden.",
+  },
+  {
+    icon: HeartHandshake,
+    title: "ErzieherInnen & Koordination",
+    text: "Tagesüberblick, Abwesenheiten, Dienste und relevante Informationen an einem Ort sehen.",
+  },
+];
+
+const onboardingSteps = [
+  {
+    title: "Demo anfragen",
+    text: "Ihr beschreibt kurz eure aktuelle Organisation und die größten Reibungspunkte.",
+  },
+  {
+    title: "Setup mit Kita und Vorstand klären",
+    text: "Wir schauen gemeinsam auf Rollen, Module, Datenschutzfragen und den sinnvollen Einstieg.",
+  },
+  {
+    title: "Familien einladen oder anlegen",
+    text: "Der Vorstand bringt Eltern, Kinder und Zuständigkeiten in eine saubere Struktur.",
+  },
+  {
+    title: "Module im Alltag nutzen",
+    text: "Dienste, Kalender, Krankmeldungen, Adressbuch und Schwarzes Brett ersetzen nach und nach Nebenkanäle.",
+  },
 ];
 
 // Eingeloggte User von der Landingpage direkt weiterleiten.
@@ -98,7 +182,7 @@ export default async function LandingPage() {
   return (
     <div className="min-h-screen bg-[#f8faf8] text-slate-950">
       <header className="absolute left-0 right-0 top-0 z-20">
-        <div className="mx-auto flex h-20 w-full max-w-7xl items-center justify-between px-5 sm:px-6">
+        <div className="mx-auto flex min-h-20 w-full max-w-7xl items-center justify-between gap-3 px-5 py-4 sm:px-6">
           <Link href="/" className="flex items-center gap-3 text-white">
             <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/12 ring-1 ring-white/30">
               <ShieldCheck className="h-5 w-5" />
@@ -108,7 +192,7 @@ export default async function LandingPage() {
             </span>
           </Link>
 
-          <nav className="flex items-center gap-2">
+          <nav className="flex flex-wrap items-center justify-end gap-2">
             <Button
               asChild
               variant="ghost"
@@ -120,7 +204,7 @@ export default async function LandingPage() {
               asChild
               className="bg-white text-slate-950 shadow-sm hover:bg-white/90"
             >
-              <Link href="/register">Kita registrieren</Link>
+              <Link href="/#kontakt">Demo anfragen</Link>
             </Button>
           </nav>
         </div>
@@ -145,16 +229,15 @@ export default async function LandingPage() {
           <div className="relative z-10 mx-auto flex min-h-[calc(100svh-56px)] w-full max-w-7xl items-center px-5 pb-20 pt-28 sm:px-6">
             <div className="max-w-4xl text-white">
               <Badge className="mb-6 border-white/20 bg-white/12 text-white hover:bg-white/12">
-                Kita-Betriebssystem für Elternvereine
+                Kita-Betriebssystem für Elterninitiativen und Kita-Vereine
               </Badge>
               <h1 className="max-w-4xl text-balance text-5xl font-semibold leading-[1.02] sm:text-6xl lg:text-7xl">
-                Die einfache Plattform für Elternvereine, Dienste und
+                Weniger Chat-Chaos. Weniger Excel. Mehr Ruhe im Kita-Verein.
-                Kommunikation.
               </h1>
               <p className="mt-6 max-w-2xl text-lg leading-8 text-white/82 sm:text-xl">
-                Organisiert Notdienste, Termine, Krankmeldungen und offizielle
+                Für Elterninitiativen, freie Kitas und Kita-Vereine, die
-                Kommunikation an einem Ort. Schluss mit Zettelwirtschaft und
+                Dienste, Termine, Krankmeldungen und offizielle Kommunikation
-                WhatsApp-Chaos.
+                ehrenamtlich organisieren.
               </p>
 
               <div className="mt-9 flex flex-col gap-3 sm:flex-row">
@@ -163,8 +246,8 @@ export default async function LandingPage() {
                   size="lg"
                   className="h-12 bg-white px-6 text-slate-950 hover:bg-white/90"
                 >
-                  <Link href="/register">
+                  <Link href="/#kontakt">
-                    Kita registrieren
+                    Demo anfragen
                     <ArrowRight className="h-4 w-4" />
                   </Link>
                 </Button>
@@ -174,11 +257,11 @@ export default async function LandingPage() {
                   variant="outline"
                   className="h-12 border-white/35 bg-white/10 px-6 text-white hover:bg-white/20 hover:text-white"
                 >
-                  <Link href="/login">Login</Link>
+                  <Link href="/register">Kita kostenlos registrieren</Link>
                 </Button>
               </div>
 
-              <div className="mt-10 grid max-w-3xl gap-3 text-sm text-white/78 md:grid-cols-3">
+              <div className="mt-10 grid max-w-4xl gap-3 text-sm text-white/78 md:grid-cols-3">
                 {proofPoints.map((item) => (
                   <div key={item} className="flex items-center gap-2">
                     <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-300" />
@@ -190,6 +273,87 @@ export default async 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.85fr_1.15fr] lg:items-end">
+            <div>
+              <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
+                Raus aus den Nebenkanälen
+              </p>
+              <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
+                Kita-Planer ersetzt die Dinge, die Vorstände abends noch
+                zusammenhalten müssen.
+              </h2>
+            </div>
+            <p className="max-w-2xl text-sm leading-6 text-slate-600 lg:justify-self-end">
+              Elternvereine funktionieren nur, wenn Informationen zuverlässig
+              ankommen. Deshalb bündelt Kita-Planer die wiederkehrenden
+              Alltagslisten, Anfragen und offiziellen Nachrichten an einem Ort.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
+            {replacedTools.map((item) => {
+              const Icon = item.icon;
+              return (
+                <div
+                  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">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <h3 className="font-semibold tracking-tight">{item.title}</h3>
+                  <p className="mt-2 text-sm leading-6 text-slate-600">
+                    {item.text}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        <section className="border-y border-slate-200 bg-white px-5 py-20 sm:px-6">
+          <div className="mx-auto grid w-full max-w-7xl gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
+            <div>
+              <Badge className="mb-5 bg-slate-950 text-white hover:bg-slate-950">
+                Für den Vereinsalltag
+              </Badge>
+              <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
+                Eine Oberfläche für Vorstand, Eltern und Kita-Team.
+              </h2>
+              <p className="mt-5 max-w-xl text-sm leading-6 text-slate-600">
+                Kita-Planer trennt Zuständigkeiten, ohne neue Silos zu bauen.
+                Jede Rolle sieht die Aufgaben und Informationen, die sie im
+                gemeinsamen Kita-Alltag wirklich braucht.
+              </p>
+            </div>
+
+            <div className="grid gap-4">
+              {audienceRoles.map((role) => {
+                const Icon = role.icon;
+                return (
+                  <div
+                    key={role.title}
+                    className="grid gap-4 rounded-lg border border-slate-200 bg-[#f8faf8] p-5 shadow-sm sm:grid-cols-[auto_1fr] sm:items-start"
+                  >
+                    <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-white text-emerald-700 ring-1 ring-emerald-100">
+                      <Icon className="h-5 w-5" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold tracking-tight">
+                        {role.title}
+                      </h3>
+                      <p className="mt-2 text-sm leading-6 text-slate-600">
+                        {role.text}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
         <section className="mx-auto w-full max-w-7xl px-5 py-24 sm:px-6">
           <div className="mb-12 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
             <div className="max-w-3xl">
@@ -257,6 +421,44 @@ export default async function LandingPage() {
           </div>
         </section>
 
+        <section className="mx-auto w-full max-w-7xl px-5 pb-24 sm:px-6">
+          <div className="grid gap-10 rounded-lg border border-slate-200 bg-white p-6 shadow-sm lg:grid-cols-[0.85fr_1.15fr] lg:p-10">
+            <div>
+              <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
+                <Route className="h-6 w-6" />
+              </div>
+              <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
+                So startet ihr
+              </p>
+              <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
+                Erst verstehen, dann sauber einführen.
+              </h2>
+              <p className="mt-5 text-sm leading-6 text-slate-600">
+                Elternvereine haben wenig Zeit für Tool-Einführung. Der Einstieg
+                soll deshalb mit euren echten Abläufen beginnen, nicht mit einer
+                langen Konfigurationsliste.
+              </p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              {onboardingSteps.map((step, index) => (
+                <div
+                  key={step.title}
+                  className="rounded-lg border border-slate-200 bg-[#f8faf8] p-5"
+                >
+                  <div className="mb-4 flex h-8 w-8 items-center justify-center rounded-full bg-slate-950 text-sm font-semibold text-white">
+                    {index + 1}
+                  </div>
+                  <h3 className="font-semibold tracking-tight">{step.title}</h3>
+                  <p className="mt-2 text-sm leading-6 text-slate-600">
+                    {step.text}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
         <section className="bg-slate-950 px-5 py-24 text-white sm:px-6">
           <div className="mx-auto grid w-full max-w-7xl gap-12 lg:grid-cols-[0.92fr_1.08fr] lg:items-start">
             <div>
@@ -270,14 +472,14 @@ export default async function LandingPage() {
                 Datenschutz ist nicht die Fußnote. Er ist die Architektur.
               </h2>
               <p className="mt-5 max-w-xl text-base leading-7 text-slate-300">
-                Elternvereine verwalten besonders sensible Daten. Deshalb ist
+                Kita-Vereine verwalten besonders sensible Daten. Deshalb ist
-                Kita-Planer so gebaut, dass Sichtbarkeit, Löschung und
+                Kita-Planer so gebaut, dass Sichtbarkeit, Rollenrechte,
-                Mandantentrennung nicht vom guten Willen einzelner Chats
+                Löschung und Mandantentrennung nicht vom guten Willen einzelner
-                abhängen.
+                Chats abhängen.
               </p>
             </div>
 
-            <div className="grid gap-4 sm:grid-cols-2">
+            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
               {privacyPoints.map((point) => {
                 const Icon = point.icon;
                 return (
@@ -304,19 +506,19 @@ export default async function LandingPage() {
             <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
               <div className="max-w-2xl">
                 <h2 className="text-2xl font-semibold tracking-tight">
-                  Bereit für eine Kita-Organisation ohne Nebenkanäle?
+                  Bereit für weniger Nebenkanäle im Kita-Verein?
                 </h2>
                 <p className="mt-3 text-sm leading-6 text-slate-600">
-                  Registriere eure Kita, lade den Vorstand ein und starte mit
+                  Fragt eine Demo an und prüft gemeinsam, welche Abläufe zuerst
-                  einem System, das für Elternvereine und Datenschutz gebaut ist.
+                  aus Chat, Tabelle und Telefonliste herauswandern sollten.
                 </p>
               </div>
               <div className="flex flex-col gap-3 sm:flex-row">
                 <Button asChild size="lg">
-                  <Link href="/register">Kita registrieren</Link>
+                  <Link href="/#kontakt">Demo anfragen</Link>
                 </Button>
                 <Button asChild size="lg" variant="outline">
-                  <Link href="/login">Login</Link>
+                  <Link href="/register">Kita kostenlos registrieren</Link>
                 </Button>
               </div>
             </div>