not-found-1

1import { Compass, Home } from "lucide-react";
2import { Button } from "@/components/ui/button";
3import {
4  Empty,
5  EmptyContent,
6  EmptyDescription,
7  EmptyHeader,
8  EmptyTitle,
9} from "@/components/ui/empty";
10 
11export function NotFoundPage() {
12  return (
13    <div className="flex w-full items-center justify-center">
14      <div className="flex h-screen items-center border-x">
15        <div>
16          <div className="absolute inset-x-0 h-px bg-border" />
17          <Empty>
18            <EmptyHeader>
19              <EmptyTitle className="font-black font-mono text-8xl">
20                404
21              </EmptyTitle>
22              <EmptyDescription className="text-nowrap">
23                The page you're looking for might have been <br />
24                moved or doesn't exist.
25              </EmptyDescription>
26            </EmptyHeader>
27            <EmptyContent>
28              <div className="flex gap-2">
29                <Button asChild>
30                  <a href="#">
31                    <Home /> Go Home
32                  </a>
33                </Button>
34 
35                <Button asChild variant="outline">
36                  <a href="#">
37                    <Compass /> Explore
38                  </a>
39                </Button>
40              </div>
41            </EmptyContent>
42          </Empty>
43          <div className="absolute inset-x-0 h-px bg-border" />
44        </div>
45      </div>
46    </div>
47  );
48}