Initial commit: Van's DIY & Bastelbedarf Astro shop

src/pages/kontakt/index.astro

@@ -0,0 +1,66 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import type { Locale } from "../../i18n/config";
+import { useTranslations } from "../../i18n/ui";
+
+const lang: Locale = "de";
+const t = useTranslations(lang);
+---
+<Layout title="Kontakt" description="Kontaktiere Van's DIY & Bastelbedarf." lang={lang} path="/kontakt/">
+  <section class="section-tight">
+    <div class="container">
+      <span class="eyebrow">{t.nav.contact}</span>
+      <h1>{t.contact.title}</h1>
+      <p class="lead">{t.contact.lead}</p>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container grid grid-2 contact-layout">
+      <form class="frm card" id="contact-form">
+        <div>
+          <label for="name">{t.contact.name}</label>
+          <input id="name" name="name" type="text" required />
+        </div>
+        <div>
+          <label for="email">{t.contact.email}</label>
+          <input id="email" name="email" type="email" required />
+        </div>
+        <div>
+          <label for="betreff">{t.contact.subject}</label>
+          <input id="betreff" name="betreff" type="text" />
+        </div>
+        <div>
+          <label for="nachricht">{t.contact.message}</label>
+          <textarea id="nachricht" name="nachricht" rows="5" required></textarea>
+        </div>
+        <div class="checkbox-row">
+          <input id="dsgvo" type="checkbox" required />
+          <label for="dsgvo">{t.contact.gdprPrefix} <a href="/datenschutz/">{t.contact.gdprLink}</a> {t.contact.gdprSuffix}</label>
+        </div>
+        <button class="btn btn-primary btn-block" type="submit">{t.contact.send}</button>
+        <p class="small" id="form-status" role="status"></p>
+        <p class="todo-note">{t.contact.todoNote}</p>
+      </form>
+
+      <div>
+        <h3>{t.contact.directTitle}</h3>
+        <p class="small">E-Mail: <a href="mailto:[email protected]">[email protected]</a> <span class="small">{t.contact.emailPlaceholderNote}</span></p>
+        <p class="small">{t.contact.orderNote}</p>
+        <h3>{t.contact.responseTitle}</h3>
+        <p class="small">{t.contact.responseNote}</p>
+      </div>
+    </div>
+  </section>
+</Layout>
+
+<script define:vars={{ sentDemo: t.contact.sentDemo }}>
+  const form = document.getElementById("contact-form");
+  const status = document.getElementById("form-status");
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    status.textContent = sentDemo;
+    status.style.color = "var(--c-accent)";
+    form.reset();
+  });
+</script>