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

src/pages/projekte/[slug].astro

@@ -0,0 +1,58 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getAllProjects, getProject } from "../../lib/sanity";
+import { toHTML } from "@portabletext/to-html";
+
+export async function getStaticPaths() {
+  const projects = await getAllProjects();
+  return projects.map((p: any) => ({ params: { slug: p.slug.current } }));
+}
+
+const { slug } = Astro.params;
+const project = await getProject(slug!);
+
+if (!project) return Astro.redirect("/projekte");
+
+const bodyHtml = project.body ? toHTML(project.body) : "";
+---
+
+<Layout
+  title={project.title}
+  description={project.summary}
+  ogImage={project.image?.asset?.url}
+>
+  <!-- Breadcrumb -->
+  <div class="max-w-6xl mx-auto px-4 pt-6">
+    <a href="/projekte" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">← Alle Projekte</a>
+  </div>
+
+  {project.image?.asset?.url && (
+    <div class="max-w-6xl mx-auto px-4 mt-6">
+      <div class="aspect-video rounded-3xl overflow-hidden">
+        <img src={`${project.image.asset.url}?w=1200&auto=format`} alt={project.title} class="w-full h-full object-cover" />
+      </div>
+    </div>
+  )}
+
+  <section class="section">
+    <div class="max-w-3xl">
+      <div class="flex items-center gap-3 mb-4 text-sm text-[var(--color-text-muted)]">
+        {project.date && <span>📅 {project.date}</span>}
+        {project.targetGroup && <span>👥 {project.targetGroup}</span>}
+      </div>
+      <h1 class="font-brand text-4xl md:text-5xl text-[var(--color-text)] mb-6">{project.title}</h1>
+      <p class="text-xl text-[var(--color-text-muted)] leading-relaxed mb-8">{project.summary}</p>
+      {bodyHtml && (
+        <div class="prose prose-lg max-w-none text-[var(--color-text-muted)]" set:html={bodyHtml} />
+      )}
+    </div>
+  </section>
+
+  <section class="section text-center border-t border-[var(--color-border)] pt-12">
+    <p class="text-[var(--color-text-muted)] mb-4">Solche Projekte werden durch Mitgliedsbeiträge und Spenden möglich.</p>
+    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+      <a href="/mitglied-werden" class="btn-primary">Mitglied werden</a>
+      <a href="/unterstuetzen" class="btn-secondary">Spenden</a>
+    </div>
+  </section>
+</Layout>