102 lines
4.4 KiB
Plaintext
102 lines
4.4 KiB
Plaintext
---
|
||
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 = "de";
|
||
|
||
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="Startseite" 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="Gehäkeltes Hasen-Plushie in blauer Latzhose, im Gras" loading="eager" width="900" height="1200" /></div>
|
||
<div class="hero-photo hero-photo-2"><img src="/img/hero-plushie-turtle.webp" alt="Gehäkeltes Schildkröten-Plushie in Hellblau und Gelb" loading="eager" width="900" height="1200" /></div>
|
||
<div class="hero-photo hero-photo-3"><img src="/img/hero-plushie-octopus.webp" alt="Gehäkeltes Oktopus-Plushie in Rosa" loading="eager" width="900" height="1200" /></div>
|
||
<div class="hero-photo hero-photo-4"><img src="/img/hero-plushie-penguin.webp" alt="Gehäkeltes Pinguin-Plushie in Hellblau und Weiß" loading="eager" width="900" height="1200" /></div>
|
||
</div>
|
||
<div class="hero-inner">
|
||
<span class="eyebrow">🩵 Van's DIY & Bastelbedarf</span>
|
||
<h1>Handgemacht mit Liebe – <br />Kreativität zum Verschenken<br />und Selbstbehalten.</h1>
|
||
<p class="lead">Häkelwerke, Plushies, Schmuck und Bastelzubehör – jedes Stück von Hand gefertigt, mit Herz und Geduld.</p>
|
||
<div class="btn-row">
|
||
<a class="btn btn-primary" href="/shop/">Jetzt stöbern</a>
|
||
<a class="btn btn-outline" href="/ueber-die-kreative/">Über die Kreative</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-tight">
|
||
<div class="container">
|
||
<h2 class="text-center">Kategorien entdecken</h2>
|
||
<div class="grid grid-3" style="margin-top:1.5rem;">
|
||
{categories.map((c) => (
|
||
<a class="card category-card" href={`/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>Neuheiten</h2>
|
||
<a class="small" href="/shop/">Alle ansehen →</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>Bestseller</h2>
|
||
<a class="small" href="/shop/">Alle ansehen →</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>Sale %</h2>
|
||
<a class="small" href="/sale/">Alle Angebote →</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="Porträtfoto von VanVan" width="640" height="640" loading="lazy" />
|
||
<span class="portrait-badge">🩵 Handgemacht</span>
|
||
</div>
|
||
<div>
|
||
<span class="eyebrow">Die Kreative hinter dem Shop</span>
|
||
<h2>Hallo, ich bin VanVan 🩵</h2>
|
||
<blockquote class="pull-quote">„Jede Masche erzählt ihre eigene Geschichte – denn wahre Handarbeit entsteht nicht nur mit Wolle, sondern vor allem mit ganz viel Herz.”</blockquote>
|
||
<a class="btn btn-outline" href="/ueber-die-kreative/">Mehr über mich →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Layout>
|