Initial commit: Van's DIY & Bastelbedarf Astro shop

src/pages/en/sale/index.astro

@@ -0,0 +1,31 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import ProductCard from "../../../components/ProductCard.astro";
+import { saleProducts } from "../../../data/products";
+import type { Locale } from "../../../i18n/config";
+import { useTranslations } from "../../../i18n/ui";
+
+const lang: Locale = "en";
+const t = useTranslations(lang);
+const items = saleProducts();
+---
+<Layout title="Sale" description="Current offers at Van's DIY & Bastelbedarf." lang={lang} path="/sale/">
+  <div class="container">
+    <section class="page-banner" style="background-image:url('/img/banner-sale.webp'); --banner-ratio: 1600 / 639;">
+      <div class="page-banner-content">
+        <span class="eyebrow">{t.sale.eyebrow}</span>
+        <h1>{t.sale.title}</h1>
+        <p class="lead">{t.sale.lead}</p>
+      </div>
+    </section>
+  </div>
+  <section class="section-tight">
+    <div class="container">
+      {items.length > 0 ? (
+        <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+      ) : (
+        <p class="small">{t.sale.empty}</p>
+      )}
+    </div>
+  </section>
+</Layout>