91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import { useLocation, Link } from "react-router-dom";
|
|
import { useEffect } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Terminal, AlertTriangle } from "lucide-react";
|
|
import { useSettings } from "@/contexts/SettingsContext";
|
|
|
|
const NotFound = () => {
|
|
const location = useLocation();
|
|
const { playSound } = useSettings();
|
|
|
|
useEffect(() => {
|
|
console.error("404 Error: User attempted to access non-existent route:", location.pathname);
|
|
playSound('error');
|
|
}, [location.pathname, playSound]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-center space-y-6 max-w-md"
|
|
>
|
|
{/* Error code */}
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: 0.2, duration: 0.4 }}
|
|
className="flex items-center justify-center gap-3"
|
|
>
|
|
<AlertTriangle className="w-10 h-10 text-primary animate-pulse" />
|
|
<h1 className="font-minecraft text-6xl md:text-7xl text-primary text-glow">
|
|
404
|
|
</h1>
|
|
</motion.div>
|
|
|
|
{/* Terminal-style message */}
|
|
<div className="border border-primary/30 bg-background/80 p-4 rounded">
|
|
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-primary/20">
|
|
<Terminal className="w-4 h-4 text-primary/60" />
|
|
<span className="font-pixel text-xs text-muted-foreground">error.log</span>
|
|
</div>
|
|
<div className="text-left space-y-2">
|
|
<p className="font-pixel text-sm text-primary">
|
|
<span className="text-muted-foreground">$</span> cd {location.pathname}
|
|
</p>
|
|
<p className="font-pixel text-sm text-destructive">
|
|
ERROR: Directory not found
|
|
</p>
|
|
<p className="font-pixel text-xs text-muted-foreground">
|
|
The requested path does not exist on this server.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ASCII Art */}
|
|
<pre className="font-mono text-[10px] md:text-xs text-primary/40 leading-tight select-none">
|
|
{` _____
|
|
/ \\
|
|
| X X |
|
|
| ^ |
|
|
| === |
|
|
\\_____/
|
|
LOST IN THE VOID`}
|
|
</pre>
|
|
|
|
{/* Navigation */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5, duration: 0.4 }}
|
|
className="space-y-3"
|
|
>
|
|
<p className="font-pixel text-xs text-muted-foreground">
|
|
{'>'} Return to known territory:
|
|
</p>
|
|
<Link
|
|
to="/"
|
|
onClick={() => playSound('click')}
|
|
className="inline-block font-minecraft text-sm text-primary hover:text-glow border border-primary/50 hover:border-primary px-4 py-2 transition-all duration-200 hover:bg-primary/10"
|
|
>
|
|
cd /home
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotFound;
|