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:
+11
-33
@@ -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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 444 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 35 KiB |
Reference in New Issue
Block a user