import { useLayoutEffect, useRef } from 'react'; import Logo from '../../assets/chowman-bg-logo.avif'; import Alpona from '../../assets/chowman_alpona.avif'; import Thinking from '../../assets/thinking.avif'; import { Head, Link } from '@inertiajs/react'; import { ArrowRight } from 'lucide-react'; // Same alpona sizing as Register / Verify so the screens feel related. const ALPONA_SIZE = 'min(64vw,300px,30dvh)'; /** Mascot that rises up from the bottom edge and settles. */ const PeekingMascot = () => { const ref = useRef(null); useLayoutEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const animation = el.animate( [{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }], { duration: 1400, delay: 300, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', // fast start, soft landing fill: 'backwards', // stay hidden during the delay }, ); return () => animation.cancel(); }, []); return ( ); }; const NotFound = () => { return ( <>
{/* Logo */}
Chowman Logo
{/* 404 over the spinning alpona */}
404
{/* Message */}

This page doesn't exist

The link may be broken, or the page may have moved. Head back to the start to keep playing.

{/* Mascot fills the leftover height; never smaller than 80px */}
{/* Back home */} Back to home
); }; export default NotFound;