Daniel Heim
2588b6f1a5
- Brand: replace 🌈-emoji placeholder with the real logo in header, hero and footer; embed the Apex Brush webfont locally (/public/fonts) - Design system (global.css): warm paper palette, Fraunces + Hanken Grotesk, sticker buttons/cards, squiggle underlines, organic blobs, wave dividers, staggered load motion; wrap base/components in @layer so Tailwind utilities reliably override (fixes ignored padding/weight overrides) - Home: new hero showcasing the logo, manifest, three pillars, Momente gallery (placeholder photos), stats band, projects, CTA - New components: PageHeader, Wave, Decor - Subpages: unified headers (Apex Brush eyebrow + Fraunces H1), blob badges, consistent CTA bands and chips; add real .prose styling (no Tailwind typography plugin installed) - Fix datenschutz: font names Pacifico/Inter -> Fraunces/Hanken Grotesk Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
79 lines
3.3 KiB
Plaintext
79 lines
3.3 KiB
Plaintext
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
import PageHeader from "../../components/PageHeader.astro";
|
|
import { getAllProjects, imageUrl } from "../../lib/directus";
|
|
|
|
const projects = await getAllProjects();
|
|
|
|
const statusLabel: Record<string, string> = {
|
|
planned: "Geplant",
|
|
running: "Laufend",
|
|
done: "Abgeschlossen",
|
|
};
|
|
const statusColor: Record<string, string> = {
|
|
planned: "var(--color-rb-blue)",
|
|
running: "var(--color-rb-green)",
|
|
done: "var(--color-text-muted)",
|
|
};
|
|
---
|
|
|
|
<Layout
|
|
title="Projekte"
|
|
description="Aktuelle und vergangene Projekte des Kitafreunde Regenbogen e.V.: Theater, Natur, Musik, Ausflüge — für alle Kinder der Integrationskita Regenbogen Berlin."
|
|
>
|
|
<PageHeader eyebrow="Projekte">
|
|
Was wir schon gemacht haben.<br><span class="squiggle rainbow-text">Was als nächstes kommt.</span>
|
|
<Fragment slot="lead">
|
|
Jedes Projekt erzählt, warum der Verein existiert. Konkret, sichtbar, für alle.
|
|
</Fragment>
|
|
</PageHeader>
|
|
|
|
{projects.length === 0 ? (
|
|
<section class="section pt-6">
|
|
<div class="card text-center py-16 bg-[var(--color-surface-alt)]">
|
|
<p class="text-4xl mb-4">🚀</p>
|
|
<h2 class="text-xl font-bold mb-2">Projekte folgen</h2>
|
|
<p class="text-[var(--color-text-muted)]">Wir befüllen den Bereich gerade. Schau bald wieder vorbei!</p>
|
|
</div>
|
|
</section>
|
|
) : (
|
|
<section class="section pt-0">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{projects.map((p: any) => (
|
|
<a href={`/projekte/${p.slug}`} class="card group">
|
|
{p.image ? (
|
|
<div class="aspect-video rounded-xl overflow-hidden mb-4 bg-[var(--color-surface-alt)]">
|
|
<img src={imageUrl(p.image, 600)} alt={p.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
|
|
</div>
|
|
) : (
|
|
<div class="aspect-video rounded-xl mb-4 bg-[var(--color-surface-alt)] flex items-center justify-center text-4xl">🎭</div>
|
|
)}
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-current/10"
|
|
style={`color: ${statusColor[p.status ?? "done"]}`}>
|
|
{statusLabel[p.status ?? "done"]}
|
|
</span>
|
|
{p.date && <span class="text-xs text-[var(--color-text-muted)]">{p.date}</span>}
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
|
|
<p class="text-sm text-[var(--color-text-muted)] line-clamp-3">{p.summary}</p>
|
|
{p.target_group && (
|
|
<p class="text-xs text-[var(--color-text-muted)] mt-3">👥 {p.target_group}</p>
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- Idee einbringen -->
|
|
<section class="section text-center">
|
|
<div class="card max-w-lg mx-auto bg-[var(--color-surface-alt)] border-0 py-10">
|
|
<p class="text-2xl mb-3">💡</p>
|
|
<h2 class="font-bold text-xl mb-2">Du hast eine Idee?</h2>
|
|
<p class="text-[var(--color-text-muted)] text-sm mb-4">Neue Projektvorschläge sind immer willkommen.</p>
|
|
<a href="/kontakt" class="btn-primary text-sm">Idee einbringen →</a>
|
|
</div>
|
|
</section>
|
|
</Layout>
|