Use real Figma assets for 404 page, subtle icon zoom instead of color

- Replace both placeholder images with the actual exports pulled from
  the built Figma page-404 (node 4692:341, file jCCZyh1DGwdjpv1wGge9To):
  testimonial-photo (4699:372) at full 810x306 resolution, and the
  sticky-note-404 (4693:382) — a real photographed/rendered note, not the
  hand-coded CSS+Caveat approximation this had before.
- Help-link icon hover: subtle scale-110 zoom (matching Testimonials.tsx's
  avatar hover) instead of a color inversion.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-19 20:24:39 +00:00
parent e4a5ec1775
commit 3cf45cfb16
3 changed files with 11 additions and 33 deletions
+11 -33
View File
@@ -110,39 +110,17 @@ export default function NotFound() {
</Link>
</Reveal>
{/* Sticky note — drawn natively (rotated card + tape + Caveat
handwriting) rather than a cropped photo asset, since there's
no such image in /public and this reads just as well as a
coded illustration built from the same tokens (Lora for the
"404", Caveat for the handwritten line) the rest of the site
already uses for handwritten-style accents (see About.tsx's
signature quote). */}
{/* Sticky note — real asset exported straight from the built
Figma page (page-404, node 4693:382), not a hand-coded
approximation — matches project convention of using the
actual photographed/rendered note rather than recreating its
handwriting in CSS. */}
<Reveal delay={0.15} className="w-full lg:flex-1 flex items-center justify-center">
<div className="relative w-full max-w-[22rem] aspect-square rotate-2 hover:rotate-0 rounded-sm bg-[#EDE3D0] shadow-modal p-8 flex flex-col items-center text-center transition-transform duration-300">
<div className="absolute -top-3 left-1/2 -translate-x-1/2 -rotate-3 w-16 h-6 bg-[#d8cdb8]/80" />
<p
className="font-bold text-text-primary text-[4.5rem] leading-none mt-6"
style={{ fontFamily: "var(--font-lora)" }}
>
404
</p>
<div className="h-[0.1875rem] w-24 bg-brand mt-3 mb-4" />
<p
className="text-text-primary text-[1.75rem] leading-[1.15]"
style={{ fontFamily: "var(--font-caveat)" }}
>
Nicht hier.
<br />
Aber dein Ziel ist
<br />
sicher nicht weit.
</p>
<svg viewBox="0 0 32 32" className="size-8 mt-4 text-text-primary" fill="none" aria-hidden="true">
<circle cx="11" cy="13" r="1.6" fill="currentColor" />
<circle cx="21" cy="13" r="1.6" fill="currentColor" />
<path d="M9 19c1.8 2.4 4.4 3.6 7 3.6s5.2-1.2 7-3.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
</svg>
</div>
<img
alt="Sticky Note: 404. Nicht hier. Aber dein Ziel ist sicher nicht weit."
src="/404-sticky-note.png"
className="w-full max-w-[22rem] rotate-2 hover:rotate-0 transition-transform duration-300"
/>
</Reveal>
</div>
@@ -164,7 +142,7 @@ export default function NotFound() {
key={link.href}
className="group flex flex-col items-center text-center gap-3 pt-10 md:pt-0 first:pt-0 px-4 transition-transform duration-200 hover:-translate-y-1"
>
<div className="flex size-14 items-center justify-center rounded-full bg-bg-muted text-brand transition-colors duration-200 group-hover:bg-brand group-hover:text-text-primary">
<div className="flex size-14 items-center justify-center rounded-full bg-bg-muted text-brand transition-transform duration-300 group-hover:scale-110">
{link.icon}
</div>
<p className="font-semibold text-body text-text-primary">{link.title}</p>