- Sidebar nach Aufgaben gruppiert (Moderation, Inhalte, Community,
Verwaltung), komplett deutsch, mit Zählern für offene Meldungen,
Verifizierungen, Vermisst-Meldungen und ungelesene Team-Nachrichten
- Kopfzeile mit Breadcrumb, globaler Suche (Tiere + Halter), Hell/Dunkel
und eigenem Namen + Rolle; hell als Standard, Wahl im Cookie
- Startseite: Kennzahlen mit Vorwochen-Vergleich, Moderationsstatus mit
Wartezeit, letzte Eingänge, Schnellzugriff, Notschalter als Schalter,
ein Aktivitäts-Diagramm mit Umschalter statt fünf Karten
- Eigene Admin-Farbtokens (Orange in beiden Modi, Statusfarben); alle
Admin-Seiten von festen Dunkel-Klassen auf Tokens umgestellt
- Neuer Router adminOverview (getQueues, getKpis, getInbox, search)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Introduces PRODUCT.md/DESIGN.md (Impeccable skill) capturing PawFeed's
existing brand identity ("The Spotlight Porch") as durable reference, then
applies it:
- Landing hero: restrained "spotlight" glow instead of a full orange
gradient panel, tagline as the actual headline with a marigold accent on
"Stars"/"stars", real PawPrint mark fixed (was a mismatched hand-drawn
shape, also fixed a viewBox overflow clipping bug).
- Features section: one dominant mechanism (pet-as-identity) plus a quiet
supporting list, replacing the four-identical-cards grid craft-floor
refuses.
- Header: dropped the generic glass-blur sticky nav for a flat header with
a soft marigold gradient hairline; CTA button now matches DESIGN.md
(rounded-lg, no shadow, same orange as the hero CTA); logo gets a
paw-spring hover as a small on-brand moment; new active-page indicator
(LandingNavLinks) under the current nav link.
- Legal pages (Impressum/Datenschutz/Nutzungsbedingungen): replaced the
stacked numbered-card-per-section layout with a flowing typographic
document (hairline dividers, no boxes, no arbitrary section-number
badges) via the shared LegalLayout/LegalSection components.
- Nutzungsbedingungen: moved Sponsoring earlier (now 3a, right after
Nutzerinhalte & Urheberrecht) while keeping Salvatorische Klausel/Kontakt
last; existing section numbers left untouched to avoid breaking the
"gemäß Abschnitt 5" cross-reference in Haftungsausschluss.
overflow-x-auto with overflow-y left at its default resolves to auto
per the CSS overflow spec, so an irrelevant vertical scrollbar showed
up alongside the horizontal one. Adds overflow-y-hidden, plus a real
scrollbar-hide utility (@utility, Tailwind v4) for a cleaner look —
StoryTray.tsx already referenced this class name without it ever
being defined, so this fixes that dead reference too.
Opacity now animates via --paw-opacity in the same scroll-driven keyframe
as the scale/rotate transform, so each print actually fades in as it
scrolls into view instead of appearing at full (low) opacity immediately
and only growing in size. Positions reworked: irregular top gaps and
non-alternating side assignment instead of a near-uniform ladder, offsets
moved from hugging the viewport edge to flanking the centered text column,
and count bumped 13 -> 15 (+15%).
- AnimatedNumber: stat tiles count up from 0 when scrolled into view
instead of appearing static, so "live numbers" actually feels live.
- Pull quote: the story's strongest line is pulled out into its own large
editorial-style callout between the hero paragraphs and the "Von Tier
zu Tier" section, giving the wall of text a visual beat. paragraph2
trimmed (DE+EN) so the line isn't read twice back to back.
- PawPrintTrail: a scattered trail of low-opacity paw prints behind the
story content, each "stamping" into place via a pure-CSS scroll-driven
animation (animation-timeline: view(), same technique as the existing
hero-parallax-icon on the landing page) — no JS, respects
prefers-reduced-motion.
Fixed a real bug while building the trail: -z-10 on its wrapper had no
local stacking context to be scoped to (the parent had `relative` but no
z-index), so it escaped past the page content and rendered behind the
document background — invisible regardless of opacity. Giving the page's
outer wrapper `z-0` fixes it.
Verified locally via dev server + Chrome DevTools MCP: light + dark theme,
375px mobile, quote/trail/stat-tile rendering all confirmed visually.
Rebuilds the public landing page per the structural reference in
Gitea #11 (navbar layout, rounded hero card with phone mockup +
floating badges, catchphrase section, second detail-feature card,
footer repeating the navbar) — colors/typography adapted to PawFeed's
existing orange brand instead of the generic SaaS reference palette.
New:
- Sticky navbar (logo, Home/About-coming-soon/Impressum, language
switcher, Login + Sign-up pill)
- Hero: rounded-4xl gradient card, phone-framed app preview with
three floating badge cards (idle bob animation), scroll-linked
parallax on the background paw watermark via native CSS
animation-timeline: view() (progressive enhancement, no JS)
- Catchphrase section reusing the existing 4 feature translations,
each card staggered into view via a new ScrollReveal client
component (IntersectionObserver, no scroll-handler churn)
- Second rounded detail-feature card with two checklist points
- Footer repeats the navbar links + tagline + "designed by" line
All reveal/parallax/float animations respect prefers-reduced-motion
and are pure CSS — no new animation dependency. Verified in a real
browser at 390px and ~1568px (mobile nav collapse, hero stacking,
floating badges hidden on mobile, scroll reveals firing correctly).
Gitea #11
Adds a CSS-only spring-scale + expanding-burst-overlay animation
triggered when a pet paw-reacts to a post, respecting
prefers-reduced-motion. Only plays on the like transition, not unlike.
Gitea #15