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>
58 lines
2.1 KiB
Plaintext
58 lines
2.1 KiB
Plaintext
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
import { getAllProjects, getProject, imageUrl } from "../../lib/directus";
|
|
|
|
export async function getStaticPaths() {
|
|
const projects = await getAllProjects();
|
|
return projects.map((p: any) => ({ params: { slug: p.slug } }));
|
|
}
|
|
|
|
const { slug } = Astro.params;
|
|
const project = await getProject(slug!);
|
|
|
|
if (!project) return Astro.redirect("/projekte");
|
|
|
|
const bodyHtml = project.body ?? "";
|
|
---
|
|
|
|
<Layout
|
|
title={project.title}
|
|
description={project.summary}
|
|
ogImage={project.image ? imageUrl(project.image) : undefined}
|
|
>
|
|
<!-- Breadcrumb -->
|
|
<div class="max-w-6xl mx-auto px-4 pt-6">
|
|
<a href="/projekte" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">← Alle Projekte</a>
|
|
</div>
|
|
|
|
{project.image && (
|
|
<div class="max-w-6xl mx-auto px-4 mt-6">
|
|
<div class="aspect-video rounded-3xl overflow-hidden">
|
|
<img src={imageUrl(project.image, 1200)} alt={project.title} class="w-full h-full object-cover" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<section class="section">
|
|
<div class="max-w-3xl">
|
|
<div class="flex flex-wrap items-center gap-2 mb-5">
|
|
{project.date && <span class="chip">📅 {project.date}</span>}
|
|
{project.target_group && <span class="chip">👥 {project.target_group}</span>}
|
|
</div>
|
|
<h1 class="text-4xl md:text-5xl font-black text-[var(--color-text)] mb-6 leading-[1.05]">{project.title}</h1>
|
|
<p class="text-xl text-[var(--color-text-muted)] leading-relaxed mb-8">{project.summary}</p>
|
|
{bodyHtml && (
|
|
<div class="prose prose-lg max-w-none text-[var(--color-text-muted)]" set:html={bodyHtml} />
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section text-center border-t border-[var(--color-border)] pt-12">
|
|
<p class="text-[var(--color-text-muted)] mb-4">Solche Projekte werden durch Mitgliedsbeiträge und Spenden möglich.</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/mitglied-werden" class="btn-primary">Mitglied werden</a>
|
|
<a href="/unterstuetzen" class="btn-secondary">Spenden</a>
|
|
</div>
|
|
</section>
|
|
</Layout>
|