---
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>