Initial website — Astro + Tailwind + Sanity schema, 9 pages

src/pages/projekte/index.astro

@@ -0,0 +1,79 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getAllProjects } from "../../lib/sanity";
+
+const projects = await getAllProjects();
+
+const statusLabel: Record<string, string> = {
+  planned: "Geplant",
+  active: "Laufend",
+  done: "Abgeschlossen",
+};
+const statusColor: Record<string, string> = {
+  planned: "var(--color-rb-blue)",
+  active: "var(--color-rb-green)",
+  done: "var(--color-text-muted)",
+};
+---
+
+<Layout
+  title="Projekte"
+  description="Aktuelle und vergangene Projekte des Kitafreunde Regenbogen e.V.: Theater, Natur, Musik, Ausflüge — für alle Kinder der Integrationskita Regenbogen Berlin."
+>
+  <section class="section pt-16 pb-0">
+    <p class="text-sm font-semibold tracking-widest uppercase text-[var(--color-primary)] mb-3">Projekte</p>
+    <h1 class="font-brand text-5xl text-[var(--color-text)] mb-4">Was wir schon gemacht haben.<br><span class="rainbow-text">Was als nächstes kommt.</span></h1>
+    <p class="text-xl text-[var(--color-text-muted)] max-w-2xl leading-relaxed">
+      Jedes Projekt erzählt, warum der Verein existiert. Konkret, sichtbar, für alle.
+    </p>
+  </section>
+  <div class="rainbow-bar max-w-6xl mx-auto px-4 my-10"></div>
+
+  {projects.length === 0 ? (
+    <section class="section pt-0">
+      <div class="card text-center py-16 bg-[var(--color-surface-alt)]">
+        <p class="text-4xl mb-4">🚀</p>
+        <h2 class="text-xl font-bold mb-2">Projekte folgen</h2>
+        <p class="text-[var(--color-text-muted)]">Wir befüllen den Bereich gerade. Schau bald wieder vorbei!</p>
+      </div>
+    </section>
+  ) : (
+    <section class="section pt-0">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {projects.map((p: any) => (
+          <a href={`/projekte/${p.slug.current}`} class="card group">
+            {p.image?.asset?.url ? (
+              <div class="aspect-video rounded-xl overflow-hidden mb-4 bg-[var(--color-surface-alt)]">
+                <img src={`${p.image.asset.url}?w=600&auto=format`} alt={p.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
+              </div>
+            ) : (
+              <div class="aspect-video rounded-xl mb-4 bg-[var(--color-surface-alt)] flex items-center justify-center text-4xl">🎭</div>
+            )}
+            <div class="flex items-center gap-2 mb-2">
+              <span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-current/10"
+                style={`color: ${statusColor[p.status ?? "done"]}`}>
+                {statusLabel[p.status ?? "done"]}
+              </span>
+              {p.date && <span class="text-xs text-[var(--color-text-muted)]">{p.date}</span>}
+            </div>
+            <h3 class="font-bold text-lg mb-2 group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
+            <p class="text-sm text-[var(--color-text-muted)] line-clamp-3">{p.summary}</p>
+            {p.targetGroup && (
+              <p class="text-xs text-[var(--color-text-muted)] mt-3">👥 {p.targetGroup}</p>
+            )}
+          </a>
+        ))}
+      </div>
+    </section>
+  )}
+
+  <!-- Idee einbringen -->
+  <section class="section text-center">
+    <div class="card max-w-lg mx-auto bg-[var(--color-surface-alt)] border-0 py-10">
+      <p class="text-2xl mb-3">💡</p>
+      <h2 class="font-bold text-xl mb-2">Du hast eine Idee?</h2>
+      <p class="text-[var(--color-text-muted)] text-sm mb-4">Neue Projektvorschläge sind immer willkommen.</p>
+      <a href="/kontakt" class="btn-primary text-sm">Idee einbringen →</a>
+    </div>
+  </section>
+</Layout>