| 1 | import { useLocation } from "react-router-dom"; |
| 2 | import { useEffect } from "react"; |
| 3 | |
| 4 | const NotFound = () => { |
| 5 | const location = useLocation(); |
| 6 | |
| 7 | useEffect(() => { |
| 8 | console.error("404 Error: User attempted to access non-existent route:", location.pathname); |
| 9 | }, [location.pathname]); |
| 10 | |
| 11 | return ( |
| 12 | <div className="flex min-h-screen items-center justify-center bg-muted"> |
| 13 | <div className="text-center"> |
| 14 | <h1 className="mb-4 text-4xl font-bold">404</h1> |
| 15 | <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p> |
| 16 | <a href="/" className="text-primary underline hover:text-primary/90"> |
| 17 | Return to Home |
| 18 | </a> |
| 19 | </div> |
| 20 | </div> |
| 21 | ); |
| 22 | }; |
| 23 | |
| 24 | export default NotFound; |