Redesign: "Warm Paper" visual system, real logo + webfont, polished pages

- 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>
This commit is contained in:
2026-06-06 14:18:03 +02:00
parent c54762532c
commit 2588b6f1a5
32 changed files with 817 additions and 465 deletions

View File

@@ -1,16 +1,19 @@
---
import Layout from "../layouts/Layout.astro";
import PageHeader from "../components/PageHeader.astro";
import { getSettings } from "../lib/directus";
const settings = await getSettings();
---
<Layout title="Presse" description="Pressekontakt und Informationen zum Kitafreunde Regenbogen e.V., Förderverein der Integrationskita Regenbogen in Berlin-Tegel.">
<section class="section pt-16">
<p class="text-sm font-semibold tracking-widest uppercase text-[var(--color-primary)] mb-3">Presse</p>
<h1 class="font-brand text-5xl text-[var(--color-text)] mb-6">Kontakt für Presse<br>und Medien.</h1>
<PageHeader eyebrow="Presse">
Kontakt für Presse<br>und <span class="squiggle rainbow-text">Medien.</span>
<Fragment slot="lead">Pressekontakt, Boilerplate und Pressekit zum Verein.</Fragment>
</PageHeader>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-12">
<section class="section pt-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h2 class="text-xl font-bold mb-4">Pressekontakt</h2>
{settings?.contact_email ? (