|
1
|
import { Card, CardContent } from "@/components/ui/card"; |
|
2
|
import { Button } from "@/components/ui/button"; |
|
3
|
import { AlertCircle, Home, ArrowLeft } from "lucide-react"; |
|
4
|
import { useLocation } from "wouter"; |
|
5
|
|
|
6
|
export default function NotFound() { |
|
7
|
const [, setLocation] = useLocation(); |
|
8
|
|
|
9
|
return ( |
|
10
|
<div className="min-h-screen w-full flex items-center justify-center bg-background p-4 relative overflow-hidden"> |
|
11
|
<div className="absolute top-0 left-0 w-full h-full -z-10 pointer-events-none"> |
|
12
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[100px]" /> |
|
13
|
</div> |
|
14
|
|
|
15
|
<Card className="w-full max-w-md mx-4 border-border/50 shadow-glass rounded-[2rem] bg-card/60 backdrop-blur-xl"> |
|
16
|
<CardContent className="pt-8 pb-8 text-center space-y-5"> |
|
17
|
<div className="mx-auto h-16 w-16 rounded-2xl bg-destructive/10 text-destructive flex items-center justify-center"> |
|
18
|
<AlertCircle className="h-8 w-8" /> |
|
19
|
</div> |
|
20
|
<div className="space-y-2"> |
|
21
|
<h1 className="text-2xl font-bold tracking-tight">404 - Page Not Found</h1> |
|
22
|
<p className="text-sm text-muted-foreground"> |
|
23
|
The page or resource you requested could not be found. |
|
24
|
</p> |
|
25
|
</div> |
|
26
|
<div className="pt-2 flex flex-col sm:flex-row justify-center gap-3"> |
|
27
|
<Button |
|
28
|
onClick={() => setLocation("/")} |
|
29
|
className="rounded-full gap-2 font-medium" |
|
30
|
> |
|
31
|
<Home className="h-4 w-4" /> |
|
32
|
Explore Guides |
|
33
|
</Button> |
|
34
|
<Button |
|
35
|
variant="outline" |
|
36
|
onClick={() => window.history.back()} |
|
37
|
className="rounded-full gap-2 border-border/60" |
|
38
|
> |
|
39
|
<ArrowLeft className="h-4 w-4" /> |
|
40
|
Go Back |
|
41
|
</Button> |
|
42
|
</div> |
|
43
|
</CardContent> |
|
44
|
</Card> |
|
45
|
</div> |
|
46
|
); |
|
47
|
} |