t.indorf
767 lines
30 KiB
TypeScript
767 lines
30 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import {
|
||
ArrowRight,
|
||
Bell,
|
||
CheckCircle2,
|
||
ClipboardList,
|
||
Clock,
|
||
DatabaseZap,
|
||
FileStack,
|
||
Fingerprint,
|
||
HeartHandshake,
|
||
LockKeyhole,
|
||
Mail,
|
||
MessageSquareText,
|
||
MessagesSquare,
|
||
PhoneCall,
|
||
Search,
|
||
Route,
|
||
ShieldCheck,
|
||
Table2,
|
||
Trash2,
|
||
UserCog,
|
||
UsersRound,
|
||
} from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import { marketingFeatures } from "@/lib/marketing/features";
|
||
import { ContactForm } from "./contact-form";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
|
||
description:
|
||
"Die einfache Plattform für Elterninitiativen, freie Kitas und Kita-Vereine: organisiert Dienste, Termine, Krankmeldungen und offizielle Kommunikation an einem Ort.",
|
||
alternates: {
|
||
canonical: "/",
|
||
},
|
||
openGraph: {
|
||
title: "Kita-Planer für Elterninitiativen und Kita-Vereine",
|
||
description:
|
||
"Weniger Chat-Chaos, weniger Excel-Listen, mehr Ruhe im ehrenamtlichen Kita-Alltag.",
|
||
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: "Kita-Planer für Elterninitiativen und Kita-Vereine",
|
||
description:
|
||
"Organisiert Dienste, Termine, Krankmeldungen und offizielle Kommunikation an einem Ort.",
|
||
images: ["/og-image.png"],
|
||
},
|
||
};
|
||
|
||
const heroImage =
|
||
"https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?auto=format&fit=crop&w=2400&q=86";
|
||
|
||
const privacyPoints = [
|
||
{
|
||
icon: DatabaseZap,
|
||
title: "Strikt isolierte Mandanten",
|
||
text: "Jede Kita arbeitet technisch streng getrennt pro Kita. Rollen und Datenabfragen bleiben konsequent tenant-isoliert.",
|
||
},
|
||
{
|
||
icon: Fingerprint,
|
||
title: "Kontaktfreigabe per Opt-in",
|
||
text: "Adressbuchdaten erscheinen nur nach aktivem Opt-In pro Elternteil. Nicht freigegebene Kontaktdaten verlassen den Server nicht.",
|
||
},
|
||
{
|
||
icon: Trash2,
|
||
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.",
|
||
},
|
||
{
|
||
icon: LockKeyhole,
|
||
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 = [
|
||
"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.",
|
||
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",
|
||
},
|
||
];
|
||
|
||
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 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: onboardingTimeAnchors[0],
|
||
text: "Ihr beschreibt kurz eure aktuelle Organisation und die größten Reibungspunkte.",
|
||
},
|
||
{
|
||
title: onboardingTimeAnchors[1],
|
||
text: "Wir schauen gemeinsam auf Rollen, Module, Datenschutzfragen und den sinnvollen Einstieg.",
|
||
},
|
||
{
|
||
title: onboardingTimeAnchors[2],
|
||
text: "Der Vorstand bringt Eltern, Kinder und Zuständigkeiten in eine saubere Struktur.",
|
||
},
|
||
{
|
||
title: onboardingTimeAnchors[3],
|
||
text: "Dienste, Kalender, Krankmeldungen, Adressbuch und Schwarzes Brett ersetzen nach und nach Nebenkanäle.",
|
||
},
|
||
];
|
||
|
||
export default 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 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" />
|
||
</span>
|
||
<span className="text-base font-semibold tracking-tight">
|
||
Kita-Planer
|
||
</span>
|
||
</Link>
|
||
|
||
<nav className="flex flex-wrap items-center justify-end gap-2">
|
||
<Button
|
||
asChild
|
||
variant="ghost"
|
||
className="text-white hover:bg-white/10 hover:text-white"
|
||
>
|
||
<Link href="/login">Login</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
className="bg-white text-slate-950 shadow-sm hover:bg-white/90"
|
||
>
|
||
<Link href="/#kontakt">Demo anfragen</Link>
|
||
</Button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section className="relative min-h-[calc(100svh-56px)] overflow-hidden bg-slate-950">
|
||
<Image
|
||
src={heroImage}
|
||
alt=""
|
||
fill
|
||
preload
|
||
sizes="100vw"
|
||
className="object-cover object-center"
|
||
/>
|
||
<div
|
||
aria-hidden
|
||
className="absolute inset-0 bg-[linear-gradient(90deg,rgba(2,6,23,0.92),rgba(15,23,42,0.72)_45%,rgba(15,23,42,0.35)_75%,rgba(15,23,42,0.55))] sm:bg-[linear-gradient(90deg,rgba(2,6,23,0.9),rgba(15,23,42,0.68),rgba(15,23,42,0.18))]"
|
||
/>
|
||
<div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-[#f8faf8] to-transparent" />
|
||
|
||
<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 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">
|
||
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">
|
||
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">
|
||
<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 kostenlos registrieren</Link>
|
||
</Button>
|
||
</div>
|
||
|
||
<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" />
|
||
<span>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<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 ring-1 ${item.accent}`}
|
||
>
|
||
<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">
|
||
<p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
|
||
Die 5 Säulen
|
||
</p>
|
||
<h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
|
||
Plant Dienste, teilt Neuigkeiten und behaltet Termine gemeinsam
|
||
im Blick.
|
||
</h2>
|
||
</div>
|
||
<p className="max-w-md text-sm leading-6 text-slate-600">
|
||
Kita-Planer bündelt operative Aufgaben, sensible Familiendaten und
|
||
offizielle Kommunikation in einer Oberfläche, die Vorstände
|
||
kontrollieren und Eltern verstehen.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-6">
|
||
{marketingFeatures.map((feature, index) => {
|
||
const Icon = feature.icon;
|
||
const isWide = index > 2;
|
||
return (
|
||
<Card
|
||
key={feature.title}
|
||
className={`group border-slate-200 bg-white/90 shadow-sm transition duration-200 hover:-translate-y-1 hover:border-slate-300 hover:shadow-lg ${
|
||
isWide ? "xl:col-span-3" : "xl:col-span-2"
|
||
}`}
|
||
>
|
||
<CardHeader className="space-y-5">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div
|
||
className={`flex h-11 w-11 items-center justify-center rounded-lg ring-1 ${feature.accent}`}
|
||
>
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
{feature.badge && (
|
||
<Badge className="bg-slate-950 text-white hover:bg-slate-950">
|
||
{feature.badge}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<CardTitle as="h3" className="text-xl tracking-tight">
|
||
{feature.title}
|
||
</CardTitle>
|
||
<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>
|
||
<CardContent className="pt-0">
|
||
<FeaturePreview slug={feature.slug} />
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
})}
|
||
</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>
|
||
<div className="mb-7 flex h-16 w-16 items-center justify-center rounded-lg bg-emerald-400/12 text-emerald-200 ring-1 ring-emerald-300/20">
|
||
<ShieldCheck className="h-8 w-8" />
|
||
</div>
|
||
<Badge className="mb-5 border-emerald-300/20 bg-emerald-300/10 text-emerald-100 hover:bg-emerald-300/10">
|
||
Das Vorstands-Argument
|
||
</Badge>
|
||
<h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
|
||
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">
|
||
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 xl:grid-cols-3">
|
||
{privacyPoints.map((point) => {
|
||
const Icon = point.icon;
|
||
return (
|
||
<div
|
||
key={point.title}
|
||
className="rounded-lg border border-white/10 bg-white/[0.06] p-5 shadow-sm transition hover:bg-white/[0.09]"
|
||
>
|
||
<div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-white/10 text-emerald-100">
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
<h3 className="font-semibold">{point.title}</h3>
|
||
<p className="mt-2 text-sm leading-6 text-slate-300">
|
||
{point.text}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-6">
|
||
<div className="rounded-lg border border-slate-200 bg-white p-8 shadow-sm sm:p-10">
|
||
<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 weniger Nebenkanäle im Kita-Verein?
|
||
</h2>
|
||
<p className="mt-3 text-sm leading-6 text-slate-600">
|
||
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="/#kontakt">Demo anfragen</Link>
|
||
</Button>
|
||
<Button asChild size="lg" variant="outline">
|
||
<Link href="/register">Kita kostenlos registrieren</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="kontakt" className="px-5 pb-24 sm:px-6">
|
||
<div className="mx-auto grid w-full max-w-7xl gap-6 rounded-lg border border-slate-200 bg-[#eef6f1] p-5 shadow-sm lg:grid-cols-[0.9fr_1.1fr] lg:p-8">
|
||
<div className="flex flex-col justify-between rounded-lg bg-slate-950 p-8 text-white">
|
||
<div>
|
||
<div className="mb-6 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-300/12 text-emerald-200 ring-1 ring-emerald-300/20">
|
||
<MessageSquareText className="h-6 w-6" />
|
||
</div>
|
||
<Badge className="mb-5 border-white/15 bg-white/10 text-white hover:bg-white/10">
|
||
Kontakt & Demo
|
||
</Badge>
|
||
<h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
|
||
Ihr wollt sehen, ob Kita-Planer zu eurem Verein passt?
|
||
</h2>
|
||
<p className="mt-5 text-sm leading-6 text-slate-300">
|
||
Schreibt uns kurz, wie ihr aktuell organisiert seid. Wir
|
||
melden uns mit einer passenden Demo, beantworten
|
||
Datenschutzfragen oder sprechen über ein individuelles Setup.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-10 grid gap-3 text-sm text-slate-200">
|
||
{[
|
||
"Demo für Vorstand und ErzieherInnen",
|
||
"Einordnung eurer bestehenden Abläufe",
|
||
"Antworten auf Datenschutz- und Hosting-Fragen",
|
||
].map((item) => (
|
||
<div key={item} className="flex items-center gap-2">
|
||
<CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-300" />
|
||
<span>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<Card className="border-white/70 bg-white shadow-sm">
|
||
<CardHeader>
|
||
<div className="mb-2 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
|
||
<Mail className="h-5 w-5" />
|
||
</div>
|
||
<CardTitle as="h3" className="text-2xl tracking-tight">
|
||
Anfrage senden
|
||
</CardTitle>
|
||
<CardDescription className="text-sm leading-6">
|
||
Seriös, unverbindlich und ohne Sales-Theater. Wir melden uns
|
||
in der Regel zeitnah mit einem konkreten Vorschlag.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ContactForm />
|
||
</CardContent>
|
||
</Card>
|
||
</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>
|
||
);
|
||
}
|
||
|
||
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>
|
||
);
|
||
}
|