Initial website — Astro + Tailwind + Sanity schema, 9 pages
This commit is contained in:
172
src/pages/index.astro
Normal file
172
src/pages/index.astro
Normal file
@@ -0,0 +1,172 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import { getSettings, getFeaturedProjects, getLatestPosts } from "../lib/sanity";
|
||||
|
||||
const settings = await getSettings();
|
||||
const featuredProjects = await getFeaturedProjects();
|
||||
const latestPosts = await getLatestPosts(3);
|
||||
|
||||
const stats = settings?.stats;
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Mehr als Kita. Mehr als genug."
|
||||
description="Der Kitafreunde Regenbogen e.V. ist der Förderverein der Integrationskita Regenbogen in Berlin-Tegel. Für das Besondere. Für alle Kinder."
|
||||
>
|
||||
<!-- Hero -->
|
||||
<section class="relative overflow-hidden bg-gradient-to-br from-[var(--color-surface-alt)] to-white">
|
||||
<div class="section py-24 md:py-32 text-center">
|
||||
<p class="text-sm font-semibold tracking-widest uppercase text-[var(--color-primary)] mb-4">
|
||||
Berlin-Tegel · Integrationskita Regenbogen
|
||||
</p>
|
||||
<h1 class="font-brand text-5xl md:text-7xl text-[var(--color-text)] mb-6 leading-tight">
|
||||
Mehr als Kita.<br>
|
||||
<span class="rainbow-text">Mehr als genug.</span>
|
||||
</h1>
|
||||
<p class="text-xl text-[var(--color-text-muted)] max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Wir schaffen die Momente, die Kinder ihr Leben lang mit sich tragen —
|
||||
Kulturprojekte, Naturerfahrungen, Gemeinschaft. Und dafür, dass kein Kind
|
||||
außen vor bleibt.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/mitglied-werden" class="btn-primary text-base">Jetzt Mitglied werden</a>
|
||||
<a href="/was-wir-tun" class="btn-secondary text-base">Was wir tun</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative rainbow -->
|
||||
<div class="rainbow-bar absolute bottom-0 left-0 right-0"></div>
|
||||
</section>
|
||||
|
||||
<!-- Drei-Sätze -->
|
||||
<section class="section-sm text-center">
|
||||
<p class="text-2xl md:text-3xl font-semibold text-[var(--color-text)] max-w-3xl mx-auto leading-snug">
|
||||
Die Kita stellt die Grundversorgung sicher. Das Land zahlt das Nötige.
|
||||
<span class="text-[var(--color-primary)]">Wir bezahlen das Besondere.</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Drei Säulen -->
|
||||
<section class="section">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: "🎭",
|
||||
color: "var(--color-rb-violet)",
|
||||
title: "Erleben",
|
||||
text: "Theater, Musik, Natur, Kunst. Erlebnisse, die keine Lehrplan-Vorgabe anordnet — und die man nicht vergisst.",
|
||||
href: "/was-wir-tun#erleben",
|
||||
},
|
||||
{
|
||||
icon: "🤝",
|
||||
color: "var(--color-rb-green)",
|
||||
title: "Teilhabe",
|
||||
text: "Kein Kind bleibt beim Ausflug zuhause, weil die Familie sich den Beitrag nicht leisten kann. Punkt.",
|
||||
href: "/was-wir-tun#teilhabe",
|
||||
},
|
||||
{
|
||||
icon: "🌍",
|
||||
color: "var(--color-rb-orange)",
|
||||
title: "Gemeinschaft",
|
||||
text: "Eltern, Erzieher*innen, Nachbarschaft, lokale Unternehmen. Der Verein verbindet, wer die Kita trägt.",
|
||||
href: "/was-wir-tun#gemeinschaft",
|
||||
},
|
||||
].map(({ icon, color, title, text, href }) => (
|
||||
<a href={href} class="card group cursor-pointer">
|
||||
<div class="text-4xl mb-4">{icon}</div>
|
||||
<h3 class="text-xl font-bold mb-2 group-hover:text-[var(--color-primary)] transition-colors"
|
||||
style={`color: ${color}`}>{title}</h3>
|
||||
<p class="text-[var(--color-text-muted)] leading-relaxed text-sm">{text}</p>
|
||||
<p class="mt-4 text-sm font-semibold text-[var(--color-primary)]">Mehr erfahren →</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Zahlen -->
|
||||
{stats && (stats.members || stats.fundsPerYear || stats.projectsTotal) && (
|
||||
<section class="bg-[var(--color-primary)] text-white">
|
||||
<div class="max-w-6xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
||||
{stats.members && (
|
||||
<div>
|
||||
<p class="font-brand text-5xl mb-2">{stats.members}</p>
|
||||
<p class="text-white/80">Mitglieder unterstützen den Verein</p>
|
||||
</div>
|
||||
)}
|
||||
{stats.fundsPerYear && (
|
||||
<div>
|
||||
<p class="font-brand text-5xl mb-2">{stats.fundsPerYear.toLocaleString("de")} €</p>
|
||||
<p class="text-white/80">jährlich für die Kinder</p>
|
||||
</div>
|
||||
)}
|
||||
{stats.projectsTotal && (
|
||||
<div>
|
||||
<p class="font-brand text-5xl mb-2">{stats.projectsTotal}</p>
|
||||
<p class="text-white/80">Projekte seit Vereinsgründung</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- Aktuelle Projekte -->
|
||||
{featuredProjects.length > 0 && (
|
||||
<section class="section">
|
||||
<h2 class="text-3xl font-bold mb-2">Aktuelle Projekte</h2>
|
||||
<p class="text-[var(--color-text-muted)] mb-8">Was wir gerade machen und was geplant ist.</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{featuredProjects.map((p: any) => (
|
||||
<a href={`/projekte/${p.slug.current}`} class="card group">
|
||||
{p.image?.asset && (
|
||||
<div class="aspect-video bg-[var(--color-surface-alt)] rounded-xl mb-4 overflow-hidden">
|
||||
<img src={p.image.asset.url} alt={p.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
|
||||
</div>
|
||||
)}
|
||||
<p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
|
||||
<h3 class="font-bold text-lg 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>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
<a href="/projekte" class="btn-secondary">Alle Projekte →</a>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- Aktuelles -->
|
||||
{latestPosts.length > 0 && (
|
||||
<section class="section bg-[var(--color-surface-alt)] rounded-3xl">
|
||||
<h2 class="text-3xl font-bold mb-8">Aktuelles</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{latestPosts.map((post: any) => (
|
||||
<a href={`/aktuelles/${post.slug.current}`} class="card group">
|
||||
<p class="text-xs text-[var(--color-text-muted)] mb-2">
|
||||
{new Date(post.publishedAt).toLocaleDateString("de-DE", { day: "numeric", month: "long", year: "numeric" })}
|
||||
</p>
|
||||
<h3 class="font-bold leading-snug group-hover:text-[var(--color-primary)] transition-colors">{post.title}</h3>
|
||||
{post.excerpt && <p class="text-sm text-[var(--color-text-muted)] mt-2 line-clamp-3">{post.excerpt}</p>}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="/aktuelles" class="btn-secondary">Alle Beiträge →</a>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="section text-center">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="rainbow-bar w-24 mx-auto mb-8 rounded-full" style="height: 4px;"></div>
|
||||
<h2 class="font-brand text-4xl md:text-5xl text-[var(--color-text)] mb-4">Ab 1 € im Monat.</h2>
|
||||
<p class="text-lg text-[var(--color-text-muted)] mb-8">
|
||||
Kein Aufwand. Kein Ehrenamt verpflichtend.<br>
|
||||
Nur Kinder, die mehr bekommen.
|
||||
</p>
|
||||
<a href="/mitglied-werden" class="btn-primary text-lg px-8 py-4">Jetzt Mitglied werden</a>
|
||||
<p class="text-sm text-[var(--color-text-muted)] mt-4">
|
||||
Gemeinnützig anerkannt · Beiträge steuerlich absetzbar
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user