Startseite in zwei Entwürfen: A Editorial (/entwurf-a) und B Bögen (/entwurf-b), Übersicht /entwuerfe; Newsreader und Syne selbst gehostet

src/pages/entwuerfe.astro

@@ -0,0 +1,28 @@
+---
+import Base from '../layouts/Base.astro';
+import Pic from '../components/Pic.astro';
+import { img } from '../data/home';
+const items = [
+  { href: '/entwurf-a', n: 'A', t: 'Editorial', d: 'Große Serifenschrift „TEAM VK“, klare Blöcke in Blau und Navy, eckige Knöpfe. Wirkt wie ein Magazin.', pic: img.brautA },
+  { href: '/entwurf-b', n: 'B', t: 'Bögen', d: 'Schreibschrift im Kopf, Bögen wie der Durchgang im Salon, runde Knöpfe. Wirkt weich und persönlich.', pic: img.salonInnen1 },
+  { href: '/', n: 'C', t: 'Raster', d: 'Die aktuelle Fassung mit feinen Rasterlinien und schmaler Serifenschrift. Alle Unterseiten sind derzeit in diesem Stil.', pic: img.salonInnen4 },
+];
+---
+<Base title="Entwürfe der Startseite" description="Drei Entwürfe der neuen Startseite vom Friseur-Team VK im Vergleich.">
+  <section class="pad ent">
+    <p class="cap">Zur Auswahl</p>
+    <h1 class="h2 mt-3">Drei Entwürfe für die Startseite</h1>
+    <p class="lead mt-4">Gleicher Inhalt, gleiche Fotos, drei Gestaltungen. Nach der Entscheidung bekommen alle Unterseiten denselben Stil.</p>
+    <div class="ent__grid">
+      {items.map((x) => (
+        <a class="ent__item" href={x.href}>
+          <div class="fig"><Pic src={x.pic} alt="" sizes="(min-width: 56rem) 30vw, 100vw" widths={[400, 700]} pos="top" /></div>
+          <span class="cap">Entwurf {x.n}</span>
+          <h2>{x.t}</h2>
+          <p class="small muted">{x.d}</p>
+          <span class="go">Ansehen</span>
+        </a>
+      ))}
+    </div>
+  </section>
+</Base>