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,101 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import ProductCard from "../../components/ProductCard.astro";
+import { categories } from "../../data/categories";
+import { products } from "../../data/products";
+import type { Locale } from "../../i18n/config";
+
+const lang: Locale = "fr";
+
+const neuheiten = products.filter((p) => p.badges.includes("neu")).slice(0, 4);
+const bestseller = products.filter((p) => p.badges.includes("bestseller")).slice(0, 4);
+const sale = products.filter((p) => p.badges.includes("sale") || p.preisAlt).slice(0, 4);
+---
+<Layout title="Accueil" lang={lang} path="/">
+  <section class="hero">
+    <img src="/logo.png" alt="" aria-hidden="true" class="hero-watermark" />
+    <div class="container hero-content">
+      <div class="hero-gallery">
+        <div class="hero-photo hero-photo-1"><img src="/img/hero-plushie-bunny.webp" alt="Peluche lapin au crochet en salopette bleue, dans l'herbe" loading="eager" width="900" height="1200" /></div>
+        <div class="hero-photo hero-photo-2"><img src="/img/hero-plushie-turtle.webp" alt="Peluche tortue au crochet en bleu clair et jaune" loading="eager" width="900" height="1200" /></div>
+        <div class="hero-photo hero-photo-3"><img src="/img/hero-plushie-octopus.webp" alt="Peluche poulpe au crochet en rose" loading="eager" width="900" height="1200" /></div>
+        <div class="hero-photo hero-photo-4"><img src="/img/hero-plushie-penguin.webp" alt="Peluche pingouin au crochet en bleu clair et blanc" loading="eager" width="900" height="1200" /></div>
+      </div>
+      <div class="hero-inner">
+        <span class="eyebrow">🩵 Van's DIY & Bastelbedarf</span>
+        <h1>Fait main avec amour – <br />de la créativité à offrir<br />ou à garder.</h1>
+        <p class="lead">Crochet, peluches, bijoux et fournitures créatives – chaque pièce façonnée à la main, avec cœur et patience.</p>
+        <div class="btn-row">
+          <a class="btn btn-primary" href="/fr/shop/">Découvrir la boutique</a>
+          <a class="btn btn-outline" href="/fr/ueber-die-kreative/">À propos de la créatrice</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <h2 class="text-center">Découvrir les catégories</h2>
+      <div class="grid grid-3" style="margin-top:1.5rem;">
+        {categories.map((c) => (
+          <a class="card category-card" href={`/fr/shop/${c.slug}/`}>
+            <span class="cat-icon" aria-hidden="true">{c.icon}</span>
+            <h3>{c.name[lang]}</h3>
+            <p class="small">{c.description[lang]}</p>
+          </a>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  {neuheiten.length > 0 && (
+    <section class="section-tight">
+      <div class="container">
+        <div class="section-head">
+          <h2>Nouveautés</h2>
+          <a class="small" href="/fr/shop/">Tout voir →</a>
+        </div>
+        <div class="grid grid-4">{neuheiten.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+      </div>
+    </section>
+  )}
+
+  {bestseller.length > 0 && (
+    <section class="section-tight">
+      <div class="container">
+        <div class="section-head">
+          <h2>Best-sellers</h2>
+          <a class="small" href="/fr/shop/">Tout voir →</a>
+        </div>
+        <div class="grid grid-4">{bestseller.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+      </div>
+    </section>
+  )}
+
+  {sale.length > 0 && (
+    <section class="section-tight">
+      <div class="container">
+        <div class="section-head">
+          <h2>Soldes %</h2>
+          <a class="small" href="/fr/sale/">Toutes les offres →</a>
+        </div>
+        <div class="grid grid-4">{sale.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+      </div>
+    </section>
+  )}
+
+  <section class="section">
+    <div class="container grid grid-2 creator-section">
+      <div class="portrait-frame creator-photo">
+        <img src="/img/vanvan-portrait.png" alt="Photo de VanVan" width="640" height="640" loading="lazy" />
+        <span class="portrait-badge">🩵 Fait main</span>
+      </div>
+      <div>
+        <span class="eyebrow">La créatrice derrière la boutique</span>
+        <h2>Bonjour, je suis VanVan 🩵</h2>
+        <blockquote class="pull-quote">« Chaque maille raconte sa propre histoire – car le véritable artisanat ne se crée pas seulement avec de la laine, mais surtout avec beaucoup de cœur. »</blockquote>
+        <a class="btn btn-outline" href="/fr/ueber-die-kreative/">En savoir plus sur moi →</a>
+      </div>
+    </div>
+  </section>
+</Layout>