Initial commit: Van's DIY & Bastelbedarf Astro shop

2026-08-02 13:22:55 +02:00
commit 2e340f7a8a
92 changed files with 11022 additions and 0 deletions
@@ -0,0 +1,83 @@
+---
+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="Über die Kreative" description="Lerne VanVan kennen – die Person hinter Van's DIY & Bastelbedarf." lang={lang} path="/ueber-die-kreative/">
+  <section class="section-tight">
+    <div class="container grid grid-2 intro">
+      <div class="portrait-frame portrait">
+        <img src="/img/vanvan-portrait-holding.webp" alt="VanVan in ihrer Werkstatt mit selbstgehäkelten Plushies" width="900" height="1353" loading="lazy" />
+        <span class="portrait-badge">{t.common.handmadeBadge}</span>
+      </div>
+      <div>
+        <span class="eyebrow">{t.about.eyebrow}</span>
+        <h1>{t.about.title}</h1>
+        <p class="lead">{t.about.lead}</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container story">
+      {t.about.story.map((s) => (
+        <div class="story-section">
+          <h2>{s.title}</h2>
+          {s.paragraphs.map((p) => <p>{p}</p>)}
+        </div>
+      ))}
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <h2 class="text-center">{t.about.valuesTitle}</h2>
+      <div class="grid grid-3">
+        {t.about.values.map((v) => (
+          <div class="card text-center">
+            <h3>{v.icon} {v.title}</h3>
+            <p class="small">{v.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <blockquote class="pull-quote pull-quote-center">„{t.about.closing}”</blockquote>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container text-center">
+      <a class="btn btn-primary" href="/shop/">{t.common.toShop}</a>
+    </div>
+  </section>
+</Layout>
+
+<script>
+  // Dezente Scroll-Animation für die Story-Abschnitte (Wunsch aus Dokument1.pdf: "sanfte
+  // Scroll-Animationen sind willkommen"). Fällt sauber zurück, falls IntersectionObserver
+  // fehlt oder der Nutzer reduzierte Bewegung bevorzugt (siehe CSS prefers-reduced-motion).
+  const sections = document.querySelectorAll(".story-section");
+  if ("IntersectionObserver" in window && sections.length) {
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("is-visible");
+            io.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.15 }
+    );
+    sections.forEach((el) => io.observe(el));
+  } else {
+    sections.forEach((el) => el.classList.add("is-visible"));
+  }
+</script>