84 lines
2.7 KiB
Plaintext
84 lines
2.7 KiB
Plaintext
---
|
||
import Layout from "../../../layouts/Layout.astro";
|
||
import type { Locale } from "../../../i18n/config";
|
||
import { useTranslations } from "../../../i18n/ui";
|
||
|
||
const lang: Locale = "fr";
|
||
const t = useTranslations(lang);
|
||
---
|
||
<Layout title="À propos de la créatrice" description="Découvrez VanVan – la personne derrière 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 dans son atelier avec ses peluches au crochet faites main" 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="/fr/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>
|