29 lines
1.5 KiB
Plaintext
29 lines
1.5 KiB
Plaintext
---
|
|
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>
|