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

src/pages/kontakt.astro

@@ -0,0 +1,91 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { getSettings } from "../lib/sanity";
+
+const settings = await getSettings();
+const contact = settings?.contact;
+const social = settings?.social;
+---
+
+<Layout title="Kontakt" description="Kontakt zum Kitafreunde Regenbogen e.V. — schreib uns, werde Mitglied oder bring eine Idee ein.">
+  <section class="section pt-16">
+    <p class="text-sm font-semibold tracking-widest uppercase text-[var(--color-primary)] mb-3">Kontakt</p>
+    <h1 class="font-brand text-5xl text-[var(--color-text)] mb-6">Schreib uns.</h1>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-8">
+      <!-- Kontaktinfos -->
+      <div class="space-y-6">
+        <div class="card">
+          <h2 class="font-bold mb-3">Kitafreunde Regenbogen e.V.</h2>
+          <p class="text-sm text-[var(--color-text-muted)] leading-relaxed">
+            c/o Integrationskita Regenbogen<br>
+            Keilerstraße 23<br>
+            13503 Berlin
+          </p>
+        </div>
+        {contact?.email && (
+          <div class="card">
+            <h3 class="font-bold mb-2 text-sm uppercase tracking-wide text-[var(--color-text-muted)]">E-Mail</h3>
+            <a href={`mailto:${contact.email}`} class="text-[var(--color-primary)] font-medium text-lg">
+              {contact.email}
+            </a>
+          </div>
+        )}
+        <div class="card">
+          <h3 class="font-bold mb-3">Mitglied werden?</h3>
+          <p class="text-sm text-[var(--color-text-muted)] mb-3">
+            Beitrittserklärung herunterladen und ausgefüllt im Kitabüro abgeben oder per Mail schicken.
+          </p>
+          <a href="/mitglied-werden" class="btn-primary text-sm">Zur Mitgliedschaftsseite →</a>
+        </div>
+        {(social?.instagram || social?.facebook) && (
+          <div class="card">
+            <h3 class="font-bold mb-3">Social Media</h3>
+            <div class="flex gap-3">
+              {social.instagram && (
+                <a href={social.instagram} target="_blank" rel="noopener" class="btn-secondary text-sm">Instagram</a>
+              )}
+              {social.facebook && (
+                <a href={social.facebook} target="_blank" rel="noopener" class="btn-secondary text-sm">Facebook</a>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <!-- Formular (statisches HTML, ohne Backend) -->
+      <div class="card">
+        <h2 class="font-bold mb-4">Direkte Nachricht</h2>
+        <p class="text-sm text-[var(--color-text-muted)] mb-6">
+          Dieses Formular öffnet deinen E-Mail-Client.
+        </p>
+        <form
+          action={`mailto:${contact?.email ?? "info@kitafreunde-regenbogen.de"}`}
+          method="get"
+          enctype="text/plain"
+          class="space-y-4"
+        >
+          <div>
+            <label for="subject" class="block text-sm font-medium mb-1">Betreff</label>
+            <select id="subject" name="subject" class="w-full border border-[var(--color-border)] rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-[var(--color-primary)]">
+              <option value="Mitgliedschaft">Mitgliedschaft</option>
+              <option value="Projektidee">Projektidee einbringen</option>
+              <option value="Spende/Kooperation">Spende / Kooperation</option>
+              <option value="Presseanfrage">Presseanfrage</option>
+              <option value="Allgemeine Anfrage">Allgemeine Anfrage</option>
+            </select>
+          </div>
+          <div>
+            <label for="body" class="block text-sm font-medium mb-1">Nachricht</label>
+            <textarea id="body" name="body" rows="5"
+              class="w-full border border-[var(--color-border)] rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-[var(--color-primary)] resize-none"
+              placeholder="Deine Nachricht..."></textarea>
+          </div>
+          <button type="submit" class="btn-primary w-full justify-center">
+            E-Mail öffnen →
+          </button>
+        </form>
+      </div>
+    </div>
+  </section>
+</Layout>