Redesign Startseite nach Claude-Design-Entwurf: Foto-Hero (Unsplash) mit Gradient-Overlay + Live-Card, Stat-Tiles, Alarm-Band mit Smartphone-Foto; /bildnachweis + Footer-Link (Credits Woblick/Matveev)

This commit is contained in:
2026-06-28 16:51:38 +00:00
parent 1ed5a7bebe
commit b84feefc5a
3 changed files with 105 additions and 35 deletions
+29
View File
@@ -0,0 +1,29 @@
---
import Base from '../layouts/Base.astro';
const credits = [
{use:'Startseite Hero', author:'Kevin Woblick', handle:'@kovah', authorUrl:'https://unsplash.com/@kovah',
photoUrl:'https://unsplash.com/photos/a-white-wall-with-three-air-conditioners-on-it-JkHSdaYRiUI', title:'Air Conditioning'},
{use:'Startseite Alarm-Sektion', author:'Andrey Matveev', handle:'@zelebb', authorUrl:'https://unsplash.com/@zelebb',
photoUrl:'https://unsplash.com/photos/a-hand-holds-a-smartphone-showing-notifications-QGKCe8C3D8g', title:'Smartphone mit Benachrichtigungen'},
];
---
<Base title="Bildnachweis Kühlfinder" description="Fotonachweise und Lizenzangaben für die auf Kühlfinder verwendeten Bilder.">
<section class="wrap" style="max-width:780px;margin-top:2rem">
<span class="kicker"><span class="u"></span>Credits</span>
<h1 style="margin:.3rem 0 .6rem">Bildnachweis</h1>
<p class="muted">Die verwendeten Fotos stammen von <a href="https://unsplash.com/license" rel="noopener" target="_blank">Unsplash</a> und stehen unter der kostenlosen Unsplash-Lizenz. Eine Nennung ist nicht verpflichtend wir tun es trotzdem, um die Fotograf:innen zu würdigen.</p>
<div class="creditlist">
{credits.map(c => (
<div class="card creditrow">
<div><strong>{c.title}</strong><div class="muted" style="font-size:.85rem">Verwendung: {c.use}</div></div>
<div class="muted" style="font-size:.9rem">Foto: <a href={c.authorUrl} rel="noopener" target="_blank">{c.author} ({c.handle})</a> · <a href={c.photoUrl} rel="noopener" target="_blank">Original auf Unsplash ↗</a></div>
</div>
))}
</div>
<p class="note" style="margin-top:1.2rem">Hinweis: Aktuell werden die Bilder über das Unsplash-CDN eingebunden. Für eine vollständig DSGVO-konforme, selbst gehostete Variante können die Dateien lokal unter <code>/public/img/</code> abgelegt und von dort ausgeliefert werden.</p>
</section>
</Base>
<style>
.creditlist{display:flex;flex-direction:column;gap:.8rem;margin-top:1rem}
.creditrow{display:flex;flex-direction:column;gap:.4rem}
</style>