Kita/kita-planer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten landing page positioning

Browse Source
This commit is contained in:
t.indorf
2026-05-17 20:43:26 +02:00
parent 380c67963b
commit e8b62f6008
1 changed files with 236 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+236 -34
View File
@@ -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",
"Gebaut für Vorstände, Eltern und ErzieherInnen",
"Klare Rollenrechte statt Chat-Chaos",
"Für Elterninitiativen, freie Kitas und Kita-Vereine",
"Dienste, Kalender, Abwesenheiten und offizielle Infos in einem System",
"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
Kommunikation.
Weniger Chat-Chaos. Weniger Excel. Mehr Ruhe im Kita-Verein.
</h1>
<p className="mt-6 max-w-2xl text-lg leading-8 text-white/82 sm:text-xl">
Organisiert Notdienste, Termine, Krankmeldungen und offizielle
Kommunikation an einem Ort. Schluss mit Zettelwirtschaft und
WhatsApp-Chaos.
Für Elterninitiativen, freie Kitas und Kita-Vereine, die
Dienste, Termine, Krankmeldungen und offizielle Kommunikation
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">
Kita registrieren
<Link href="/#kontakt">
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-Planer so gebaut, dass Sichtbarkeit, Löschung und
Mandantentrennung nicht vom guten Willen einzelner Chats
abhängen.
Kita-Vereine verwalten besonders sensible Daten. Deshalb ist
Kita-Planer so gebaut, dass Sichtbarkeit, Rollenrechte,
Löschung und Mandantentrennung nicht vom guten Willen einzelner
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
einem System, das für Elternvereine und Datenschutz gebaut ist.
Fragt eine Demo an und prüft gemeinsam, welche Abläufe zuerst
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>