not-found-2

1"use client";
2 
3import { Compass, Home } from "lucide-react";
4import { motion } from "motion/react";
5import { Button } from "@/components/ui/button";
6import {
7  Empty,
8  EmptyContent,
9  EmptyDescription,
10  EmptyHeader,
11  EmptyTitle,
12} from "@/components/ui/empty";
13 
14const PRIMARY_ORB_HORIZONTAL_OFFSET = 40;
15const PRIMARY_ORB_VERTICAL_OFFSET = 20;
16 
17export function NotFoundPage() {
18  return (
19    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.1),transparent_70%)] text-[var(--foreground)]">
20      <div
21        aria-hidden={true}
22        className="-z-10 absolute inset-0 overflow-hidden"
23      >
24        <motion.div
25          animate={{
26            x: [
27              0,
28              PRIMARY_ORB_HORIZONTAL_OFFSET,
29              -PRIMARY_ORB_HORIZONTAL_OFFSET,
30              0,
31            ],
32            y: [
33              0,
34              PRIMARY_ORB_VERTICAL_OFFSET,
35              -PRIMARY_ORB_VERTICAL_OFFSET,
36              0,
37            ],
38            rotate: [0, 10, -10, 0],
39          }}
40          className="absolute top-1/2 left-1/3 size-90 rounded-full bg-gradient-to-tr from-purple-500/20 to-blue-500/20 blur-3xl"
41          transition={{
42            repeat: Number.POSITIVE_INFINITY,
43            duration: 4,
44            ease: "easeInOut",
45          }}
46        />
47        <motion.div
48          animate={{
49            x: [
50              0,
51              -PRIMARY_ORB_HORIZONTAL_OFFSET,
52              PRIMARY_ORB_HORIZONTAL_OFFSET,
53              0,
54            ],
55            y: [
56              0,
57              -PRIMARY_ORB_VERTICAL_OFFSET,
58              PRIMARY_ORB_VERTICAL_OFFSET,
59              0,
60            ],
61          }}
62          className="absolute right-1/4 bottom-1/3 size-120 rounded-full bg-gradient-to-br from-indigo-400/10 to-pink-400/10 blur-3xl"
63          transition={{
64            repeat: Number.POSITIVE_INFINITY,
65            duration: 4,
66            ease: "easeInOut",
67          }}
68        />
69      </div>
70 
71      <Empty>
72        <EmptyHeader>
73          <EmptyTitle className="font-extrabold text-8xl">404</EmptyTitle>
74          <EmptyDescription className="text-nowrap">
75            The page you're looking for might have been <br />
76            moved or doesn't exist.
77          </EmptyDescription>
78        </EmptyHeader>
79        <EmptyContent>
80          <div className="flex gap-2">
81            <Button asChild>
82              <a href="#">
83// … truncated