Daniel Heim
8fbd6cd5aa
Die Kita hat keinen Integrationsstatus mehr (offiziell: Kindertagesstätte "Regenbogen",
Träger EJF). Entfernt in: Footer-Adresse, Meta-Descriptions, c/o-Angaben (Impressum,
Datenschutz, Kontakt), Über-uns- und Presse-Text. Inklusion bleibt als Vereinswert
("jedes Kind zählt — unabhängig von Herkunft, Behinderung oder Kontostand").
Satzung-Seite/-PDF unverändert (wortgleicher beschlossener Satzungstext).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
237 lines
14 KiB
Plaintext
237 lines
14 KiB
Plaintext
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
import Wave from "../components/Wave.astro";
|
|
import Decor from "../components/Decor.astro";
|
|
import { getSettings, getFeaturedProjects, imageUrl } from "../lib/directus";
|
|
|
|
const settings = await getSettings();
|
|
const featuredProjects = await getFeaturedProjects();
|
|
|
|
// --- Platzhalter, damit die Seite auch ohne CMS lebendig wirkt ---
|
|
const stats = {
|
|
members: settings?.stats_members ?? 120,
|
|
funded: settings?.stats_funded ?? 14500,
|
|
};
|
|
|
|
const momente = [
|
|
{ src: "/img/momente/m1.jpg", cap: "Sommerfest", tone: "var(--color-rb-red)" },
|
|
{ src: "/img/momente/m2.jpg", cap: "Malwerkstatt", tone: "var(--color-rb-orange)" },
|
|
{ src: "/img/momente/m3.jpg", cap: "Naturtag", tone: "var(--color-rb-green)" },
|
|
{ src: "/img/momente/m4.jpg", cap: "Freispiel", tone: "var(--color-rb-cyan)" },
|
|
{ src: "/img/momente/m5.jpg", cap: "Musikstunde", tone: "var(--color-rb-violet)" },
|
|
{ src: "/img/momente/m6.jpg", cap: "Gartenprojekt",tone: "var(--color-rb-blue)" },
|
|
];
|
|
|
|
const fallbackProjects = [
|
|
{ title: "Theaterwoche für alle Gruppen", slug: "#", date: "Frühjahr 2026", img: "/img/momente/m5.jpg", chip: "Kultur", summary: "Eine Woche Bühne, Kostüme und Mut — ein Theaterpädagoge zu Gast in der Kita." },
|
|
{ title: "Naschgarten im Hof", slug: "#", date: "Laufend", img: "/img/momente/m6.jpg", chip: "Natur", summary: "Hochbeete, Beeren und Kräuter. Die Kinder säen, pflegen und ernten selbst." },
|
|
{ title: "Inklusions-Ausflüge", slug: "#", date: "Ganzjährig", img: "/img/momente/m3.jpg", chip: "Teilhabe", summary: "Damit wirklich jedes Kind mitkommt — wir übernehmen Eintritt und Fahrt." },
|
|
];
|
|
const projectsToShow = featuredProjects.length > 0 ? null : fallbackProjects;
|
|
---
|
|
|
|
<Layout
|
|
title="Mehr als Kita. Mehr als genug."
|
|
description="Der Kitafreunde Regenbogen e.V. ist der Förderverein der Kita Regenbogen in Berlin-Heiligensee. Für das Besondere. Für alle Kinder."
|
|
>
|
|
<!-- ===================== HERO ===================== -->
|
|
<section class="relative overflow-hidden">
|
|
<!-- schwebende Deko -->
|
|
<Decor type="sparkle" class="w-10 absolute top-24 left-[6%] anim-float opacity-80" />
|
|
<Decor type="cloud" class="w-24 absolute top-16 right-[10%] anim-float-slow opacity-80" />
|
|
<Decor type="loop" class="w-28 absolute bottom-24 left-[4%] opacity-60 anim-wiggle" />
|
|
|
|
<div class="section grid lg:grid-cols-2 gap-12 items-center pt-14 pb-24 md:pt-20">
|
|
<!-- Text -->
|
|
<div class="text-center lg:text-left">
|
|
<p class="eyebrow reveal d1">Berlin-Heiligensee · Förderverein seit 2019</p>
|
|
<h1 class="reveal d2 mt-3 text-[clamp(2.6rem,7vw,4.7rem)] text-[var(--color-text)] font-black leading-[0.98]">
|
|
Mehr als Kita.<br>
|
|
<span class="squiggle rainbow-text">Mehr als genug.</span>
|
|
</h1>
|
|
<p class="reveal d3 mt-6 text-lg md:text-xl text-[var(--color-text-muted)] max-w-xl mx-auto lg:mx-0 leading-relaxed">
|
|
Wir schaffen die Momente, die Kinder ihr Leben lang mit sich tragen —
|
|
Kultur, Natur, Gemeinschaft. Und dafür, dass <strong class="text-[var(--color-text)] font-semibold">kein Kind außen vor bleibt</strong>.
|
|
</p>
|
|
<div class="reveal d4 mt-9 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
|
|
<a href="/mitglied-werden" class="btn-primary text-base"><span aria-hidden="true">♥</span> Jetzt Mitglied werden</a>
|
|
<a href="/was-wir-tun" class="btn-secondary text-base">Was wir tun</a>
|
|
</div>
|
|
<div class="reveal d5 mt-7 flex flex-wrap gap-x-6 gap-y-2 justify-center lg:justify-start text-sm text-[var(--color-text-muted)]">
|
|
<span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Ab 1 € im Monat</span>
|
|
<span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Steuerlich absetzbar</span>
|
|
<span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Kein Ehrenamt nötig</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logo-Bühne -->
|
|
<div class="reveal d3 relative mx-auto w-full max-w-md aspect-square">
|
|
<!-- weicher Farb-Halo -->
|
|
<div class="absolute inset-6 rounded-[42%_58%_63%_37%/41%_44%_56%_59%] bg-white/70 backdrop-blur-sm shadow-[0_40px_80px_-30px_rgba(42,36,51,0.4)]"></div>
|
|
<div class="absolute inset-0 rounded-[42%_58%_63%_37%/41%_44%_56%_59%] bg-gradient-to-br from-[var(--color-accent-light)] via-transparent to-[rgba(0,174,239,0.15)]"></div>
|
|
<Decor type="sun" class="w-28 absolute -top-2 -right-2 anim-spin-slow" />
|
|
<Decor type="rainbow" class="w-32 absolute bottom-4 -left-4 opacity-90 anim-float" />
|
|
<Decor type="sparkle" class="w-8 absolute top-10 left-6 anim-wiggle" />
|
|
<!-- DAS Logo, groß und schön -->
|
|
<img src="/logo/logo.png" alt="Kitafreunde Regenbogen Logo"
|
|
class="relative z-10 w-[78%] h-[78%] object-contain mx-auto mt-[11%] drop-shadow-[0_18px_30px_rgba(42,36,51,0.18)] anim-float" />
|
|
</div>
|
|
</div>
|
|
|
|
<Wave color="var(--color-paper-2)" />
|
|
</section>
|
|
|
|
<!-- ===================== MANIFEST ===================== -->
|
|
<section class="bg-[var(--color-paper-2)]">
|
|
<div class="section-sm text-center max-w-3xl">
|
|
<Decor type="heart" class="w-12 mx-auto mb-5 anim-float" />
|
|
<p class="font-display text-2xl md:text-4xl font-semibold text-[var(--color-text)] leading-snug">
|
|
Die Kita sichert die Grundversorgung. Das Land zahlt das Nötige.
|
|
<span class="squiggle text-[var(--color-primary)]">Wir bezahlen das Besondere.</span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<Wave color="var(--color-paper)" flip={true} />
|
|
|
|
<!-- ===================== DREI SÄULEN ===================== -->
|
|
<section class="section">
|
|
<div class="text-center mb-12">
|
|
<p class="eyebrow">Wofür wir da sind</p>
|
|
<h2 class="mt-2 text-4xl md:text-5xl font-bold">Drei Versprechen.</h2>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-7">
|
|
{[
|
|
{ emoji: "🎭", color: "var(--color-rb-violet)", title: "Erleben", text: "Theater, Musik, Natur, Kunst. Erlebnisse, die kein Lehrplan vorschreibt — und die man nie vergisst.", href: "/was-wir-tun#erleben", tilt: "tilt-l" },
|
|
{ emoji: "🤝", color: "var(--color-rb-green)", title: "Teilhabe", text: "Kein Kind bleibt beim Ausflug zuhause, weil die Familie den Beitrag nicht stemmen kann. Punkt.", href: "/was-wir-tun#teilhabe", tilt: "" },
|
|
{ emoji: "🌍", color: "var(--color-rb-orange)", title: "Gemeinschaft", text: "Eltern, Erzieher*innen, Nachbarschaft, lokale Betriebe. Der Verein verbindet, wer die Kita trägt.", href: "/was-wir-tun#gemeinschaft", tilt: "tilt-r" },
|
|
].map(({ emoji, color, title, text, href, tilt }) => (
|
|
<a href={href} class={`sticker group ${tilt}`}>
|
|
<div class="blob w-16 h-16 grid place-items-center text-3xl mb-5"
|
|
style={`background:${color}20; box-shadow: inset 0 0 0 2px ${color}40;`}>
|
|
<span>{emoji}</span>
|
|
</div>
|
|
<h3 class="font-display text-2xl font-bold mb-2 transition-colors" style={`color:${color}`}>{title}</h3>
|
|
<p class="text-[var(--color-text-muted)] leading-relaxed">{text}</p>
|
|
<p class="mt-5 text-sm font-semibold text-[var(--color-primary)] group-hover:gap-2 inline-flex items-center gap-1 transition-all">
|
|
Mehr erfahren <span aria-hidden="true">→</span>
|
|
</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== MOMENTE (Galerie) ===================== -->
|
|
<Wave color="var(--color-paper-2)" />
|
|
<section class="bg-[var(--color-paper-2)]">
|
|
<div class="section">
|
|
<div class="flex flex-wrap items-end justify-between gap-4 mb-10">
|
|
<div>
|
|
<p class="eyebrow">Aus dem Alltag</p>
|
|
<h2 class="mt-2 text-4xl md:text-5xl font-bold">Momente, die zählen.</h2>
|
|
</div>
|
|
<span class="chip" title="Platzhalterbilder">📷 Beispielbilder</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-5">
|
|
{momente.map((m, i) => (
|
|
<figure class={`photo-frame relative ${i % 3 === 0 ? "tilt-l" : i % 3 === 2 ? "tilt-r" : ""} transition-transform duration-300 hover:rotate-0 hover:-translate-y-1 ${i === 0 || i === 4 ? "md:row-span-2" : ""}`}>
|
|
<div class={`relative overflow-hidden rounded-[0.6rem] ${i === 0 || i === 4 ? "aspect-[3/4]" : "aspect-[4/3]"}`}>
|
|
<img src={m.src} alt={m.cap} loading="lazy" style="filter: saturate(0.9) contrast(1.03);" />
|
|
<!-- Markenfärbung, damit Platzhalter on-brand wirken -->
|
|
<div class="absolute inset-0" style={`background:${m.tone}; mix-blend-mode: soft-light; opacity:.6;`}></div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-transparent"></div>
|
|
</div>
|
|
<figcaption class="absolute bottom-3 left-3">
|
|
<span class="chip" style={`background:${m.tone}; color:#fff;`}>{m.cap}</span>
|
|
</figcaption>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<Wave color="var(--color-paper-3)" />
|
|
|
|
<!-- ===================== ZAHLEN ===================== -->
|
|
<section class="relative overflow-hidden bg-[var(--color-paper-3)] text-white">
|
|
<Decor type="sparkle" class="w-12 absolute top-8 right-[12%] opacity-70 anim-wiggle" />
|
|
<Decor type="sparkle" class="w-7 absolute bottom-10 left-[14%] opacity-60 anim-float" />
|
|
<div class="max-w-5xl mx-auto px-4 py-20 grid grid-cols-1 sm:grid-cols-3 gap-10 text-center">
|
|
<div>
|
|
<p class="font-display text-6xl font-black rainbow-text">{stats.members}</p>
|
|
<p class="text-white/70 mt-2">Mitglieder tragen den Verein</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-display text-6xl font-black rainbow-text">{stats.funded.toLocaleString("de")} €</p>
|
|
<p class="text-white/70 mt-2">in Projekte geflossen</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-display text-6xl font-black rainbow-text">100%</p>
|
|
<p class="text-white/70 mt-2">der Mittel kommen bei den Kindern an</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<Wave color="var(--color-paper)" />
|
|
|
|
<!-- ===================== PROJEKTE ===================== -->
|
|
<section class="section">
|
|
<div class="flex flex-wrap items-end justify-between gap-4 mb-10">
|
|
<div>
|
|
<p class="eyebrow">Was gerade läuft</p>
|
|
<h2 class="mt-2 text-4xl md:text-5xl font-bold">Aktuelle Projekte</h2>
|
|
</div>
|
|
<a href="/projekte" class="btn-secondary text-sm">Alle Projekte →</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-7">
|
|
{featuredProjects.length > 0
|
|
? featuredProjects.map((p: any) => (
|
|
<a href={`/projekte/${p.slug}`} class="sticker group !p-0 overflow-hidden">
|
|
{p.image && (
|
|
<div class="aspect-video overflow-hidden">
|
|
<img src={imageUrl(p.image, 600)} alt={p.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
)}
|
|
<div class="p-6">
|
|
<p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
|
|
<h3 class="font-display font-bold text-xl group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
|
|
<p class="text-sm text-[var(--color-text-muted)] mt-2 line-clamp-2">{p.summary}</p>
|
|
</div>
|
|
</a>
|
|
))
|
|
: projectsToShow!.map((p) => (
|
|
<a href={p.slug} class="sticker group !p-0 overflow-hidden">
|
|
<div class="aspect-video overflow-hidden relative">
|
|
<img src={p.img} alt={p.title} loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
<span class="chip absolute top-3 left-3 bg-white/90">{p.chip}</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
|
|
<h3 class="font-display font-bold text-xl group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
|
|
<p class="text-sm text-[var(--color-text-muted)] mt-2">{p.summary}</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== CTA ===================== -->
|
|
<section class="section">
|
|
<div class="relative overflow-hidden rounded-[2.5rem] bg-[var(--color-primary)] text-white text-center px-6 py-16 md:py-20">
|
|
<div class="absolute inset-0 opacity-30 bg-gradient-to-br from-[var(--color-rb-violet)] via-[var(--color-rb-blue)] to-[var(--color-rb-cyan)]"></div>
|
|
<Decor type="sun" class="w-24 absolute -top-4 -left-4 opacity-80 anim-spin-slow" />
|
|
<Decor type="rainbow" class="w-28 absolute -bottom-2 right-6 opacity-90 anim-float" />
|
|
<div class="relative max-w-2xl mx-auto">
|
|
<p class="eyebrow !text-[var(--color-rb-yellow)]">Schon ab 1 € im Monat</p>
|
|
<h2 class="mt-3 text-4xl md:text-6xl font-black">Werde Kitafreund*in.</h2>
|
|
<p class="mt-5 text-lg text-white/85">
|
|
Kein Aufwand. Kein verpflichtendes Ehrenamt.<br class="hidden sm:block">
|
|
Nur Kinder, die mehr bekommen.
|
|
</p>
|
|
<a href="/mitglied-werden" class="btn-primary text-lg mt-9 !bg-white !text-[var(--color-primary)] !shadow-[0_6px_0_0_rgba(0,0,0,0.25)]">
|
|
<span aria-hidden="true">♥</span> Jetzt Mitglied werden
|
|
</a>
|
|
<p class="text-sm text-white/70 mt-4">Gemeinnützig anerkannt · Beiträge steuerlich absetzbar</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|