diff --git a/messages/de.json b/messages/de.json index f4cd525..0866d30 100644 --- a/messages/de.json +++ b/messages/de.json @@ -648,7 +648,8 @@ "kicker": "Unsere Geschichte", "title": "Wie aus einem späten Abend eine echte Herzenssache wurde", "paragraph1": "Kennst du diese Abende, an denen du im Bett liegst, durch Social Media scrollst und dir nach der zehnten Werbeanzeige und dem hundertsten Lifestyle-Post denkst: Eigentlich will ich nur Bilder von Tieren sehen? Genau an so einem Abend, Ende 2025, ist PawFeed entstanden.", - "paragraph2": "Ich habe mich gefragt, warum es keine Plattform gibt, die sich einzig und allein um das dreht, was uns wirklich Freude macht: unsere Tiere. Egal ob Hund, Katze oder Vogel — sie verdienen einen eigenen Raum, in dem sie nicht Nebendarsteller sind, sondern die Hauptrolle spielen. Also habe ich angefangen, genau diesen Raum zu bauen.", + "paragraph2": "Ich habe mich gefragt, warum es keine Plattform gibt, die sich einzig und allein um das dreht, was uns wirklich Freude macht: unsere Tiere — Hund, Katze oder Vogel. Also habe ich angefangen, genau diesen Raum zu bauen.", + "pullQuote": "Sie verdienen einen eigenen Raum, in dem sie nicht Nebendarsteller sind, sondern die Hauptrolle spielen.", "sectionHeading": "Von Tier zu Tier, von Herz zu Herz", "paragraph3": "Bei PawFeed dreht sich alles um echte Geschichten statt erzwungene Trends. Du folgst den Rassen und Tieren, die dir wirklich am Herzen liegen, teilst Adoptionsgeschichten und den ganz normalen Alltag mit deinem Vierbeiner — ganz ohne den Lärm, der uns sonst überall begegnet.", "paragraph4": "Aus einer späten Idee wurde nach Monaten voller Arbeit und Herzblut eine echte Herzenssache. Am 1. September 2026 startet PawFeed offiziell — und ich freue mich schon riesig darauf, all die wunderbaren Fellnasen und ihre Geschichten kennenzulernen.", diff --git a/messages/en.json b/messages/en.json index c66ca0d..c97b814 100644 --- a/messages/en.json +++ b/messages/en.json @@ -648,7 +648,8 @@ "kicker": "Our story", "title": "How a late night turned into something we truly love", "paragraph1": "Do you know those nights when you're lying in bed, scrolling through social media, and after the tenth ad and the hundredth lifestyle post you think: I just want to see pictures of animals? That's exactly the kind of night, in late 2025, when PawFeed was born.", - "paragraph2": "I asked myself why there wasn't a platform built entirely around what actually brings us joy: our pets. Dog, cat, or bird — they deserve a space of their own, where they're not a supporting act but the main character. So I started building exactly that.", + "paragraph2": "I asked myself why there wasn't a platform built entirely around what actually brings us joy: our pets — dog, cat, or bird. So I started building exactly that.", + "pullQuote": "They deserve a space of their own, where they're not a supporting act but the main character.", "sectionHeading": "From pet to pet, heart to heart", "paragraph3": "PawFeed is about real stories, not forced trends. You follow the breeds and animals you truly care about, share adoption stories and everyday moments with your companion — without the noise that follows us everywhere else.", "paragraph4": "What started as a late-night idea became, after months of work and heart, something I truly care about. PawFeed officially launches on September 1, 2026 — and I can't wait to meet all the wonderful pets and their stories.", diff --git a/src/app/globals.css b/src/app/globals.css index 3e901ed..365701a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -218,6 +218,31 @@ } } +/* Über-uns paw print trail — scattered decorative icons behind the story + text (Gitea #23) that "stamp" into place as each one scrolls into view. + Base rule sets the resting rotation/scale so the fallback (no scroll- + timeline support) still looks intentional, not broken. */ +.paw-trail-icon { + transform: scale(1) rotate(var(--paw-rot, 0deg)); +} + +@keyframes paw-trail-reveal { + from { + transform: scale(0.4) rotate(var(--paw-rot, 0deg)); + } + to { + transform: scale(1) rotate(var(--paw-rot, 0deg)); + } +} + +@supports (animation-timeline: view()) { + .paw-trail-icon { + animation: paw-trail-reveal ease-out both; + animation-timeline: view(); + animation-range: entry 0% entry 65%; + } +} + @media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1; @@ -228,4 +253,8 @@ .hero-parallax-icon { animation: none !important; } + .paw-trail-icon { + animation: none !important; + transform: scale(1) rotate(var(--paw-rot, 0deg)) !important; + } } \ No newline at end of file diff --git a/src/app/ueber-uns/page.tsx b/src/app/ueber-uns/page.tsx index cbf2f0c..05bfcd6 100644 --- a/src/app/ueber-uns/page.tsx +++ b/src/app/ueber-uns/page.tsx @@ -1,11 +1,13 @@ import type { Metadata } from "next"; import { getTranslations } from "next-intl/server"; import Link from "next/link"; -import { Sparkles, Users, PawPrint, HandHeart } from "lucide-react"; +import { Sparkles, Users, PawPrint, HandHeart, Quote } from "lucide-react"; import { createTRPCCaller } from "@/trpc/server"; import { ScrollReveal } from "@/components/landing/ScrollReveal"; import { LandingHeader } from "@/components/landing/LandingHeader"; import { LandingFooter } from "@/components/landing/LandingFooter"; +import { PawPrintTrail } from "@/components/landing/PawPrintTrail"; +import { AnimatedNumber } from "@/components/landing/AnimatedNumber"; export const metadata: Metadata = { title: "Über uns — PawFeed", @@ -29,7 +31,8 @@ export default async function AboutPage() { ] as const; return ( -
+
+ {/* Story */} @@ -50,6 +53,16 @@ export default async function AboutPage() { + {/* Pull quote */} +
+ + +
+ {/* Section heading + third paragraph */}
@@ -80,7 +93,7 @@ export default async function AboutPage() {

- {value.toLocaleString()} +

{label}

diff --git a/src/components/landing/AnimatedNumber.tsx b/src/components/landing/AnimatedNumber.tsx new file mode 100644 index 0000000..ea514e5 --- /dev/null +++ b/src/components/landing/AnimatedNumber.tsx @@ -0,0 +1,60 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; + +interface AnimatedNumberProps { + value: number; + durationMs?: number; +} + +/** + * Counts up from 0 to `value` once it scrolls into view — makes the "Über + * uns" live stats (Gitea #23) actually feel live instead of just claiming + * to be. IntersectionObserver + requestAnimationFrame, same pattern as + * ScrollReveal.tsx. + */ +export function AnimatedNumber({ value, durationMs = 1400 }: AnimatedNumberProps) { + const ref = useRef(null); + const [display, setDisplay] = useState(0); + const [started, setStarted] = useState(false); + + useEffect(() => { + const node = ref.current; + if (!node) return; + + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + setStarted(true); + observer.disconnect(); + } + }, + { threshold: 0.4 } + ); + observer.observe(node); + return () => observer.disconnect(); + }, []); + + useEffect(() => { + if (!started) return; + if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { + setDisplay(value); + return; + } + + const start = performance.now(); + let raf: number; + + function tick(now: number) { + const progress = Math.min((now - start) / durationMs, 1); + const eased = 1 - Math.pow(1 - progress, 3); // ease-out-cubic + setDisplay(Math.round(eased * value)); + if (progress < 1) raf = requestAnimationFrame(tick); + } + + raf = requestAnimationFrame(tick); + return () => cancelAnimationFrame(raf); + }, [started, value, durationMs]); + + return {display.toLocaleString()}; +} diff --git a/src/components/landing/PawPrintTrail.tsx b/src/components/landing/PawPrintTrail.tsx new file mode 100644 index 0000000..b5932a9 --- /dev/null +++ b/src/components/landing/PawPrintTrail.tsx @@ -0,0 +1,50 @@ +import { PawPrint } from "lucide-react"; + +type Print = { + top: string; + side: "left" | "right"; + offset: string; + size: string; + rotate: number; + opacity: number; +}; + +// Scattered footprint positions down the "Über uns" page — deliberately +// irregular (varied rotation/offset/size) so it reads as a trail, not a grid. +const PRINTS: Print[] = [ + { top: "4%", side: "right", offset: "6%", size: "h-14 w-14 sm:h-20 sm:w-20", rotate: -18, opacity: 0.07 }, + { top: "16%", side: "left", offset: "4%", size: "h-10 w-10 sm:h-14 sm:w-14", rotate: 12, opacity: 0.08 }, + { top: "27%", side: "right", offset: "10%", size: "h-16 w-16 sm:h-24 sm:w-24", rotate: 8, opacity: 0.06 }, + { top: "40%", side: "left", offset: "8%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: -10, opacity: 0.07 }, + { top: "53%", side: "right", offset: "5%", size: "h-10 w-10 sm:h-14 sm:w-14", rotate: 20, opacity: 0.08 }, + { top: "66%", side: "left", offset: "12%", size: "h-14 w-14 sm:h-20 sm:w-20", rotate: -6, opacity: 0.06 }, + { top: "80%", side: "right", offset: "8%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: 15, opacity: 0.07 }, + { top: "92%", side: "left", offset: "6%", size: "h-10 w-10 sm:h-12 sm:w-12", rotate: -14, opacity: 0.06 }, +]; + +/** + * Decorative paw print trail behind the "Über uns" story content (Gitea + * #23) — pure CSS scroll-driven animation (see .paw-trail-icon in + * globals.css), so this stays a Server Component. Each print "stamps" + * into place as it scrolls into view instead of just sitting static. + */ +export function PawPrintTrail() { + return ( + + ); +}