feat: add NotFoundPage component

src/app/not-found.tsx

@@ -0,0 +1,132 @@
+import {
+  RssIcon,
+  BookMarkedIcon,
+  BookOpenTextIcon,
+  ChevronRightIcon,
+  ClipboardListIcon,
+} from "lucide-react";
+import Image from "next/image";
+import { JSX, SVGProps } from "react";
+
+const links = [
+  {
+    name: "文档",
+    href: "#",
+    description: "探索如何将我们的应用与工具完美融合。",
+    icon: BookOpenTextIcon,
+  },
+  {
+    name: "API 参考",
+    href: "#",
+    description:
+      "我们库的完整 API 参考，就像一本详尽的探险指南，助您深入探索。",
+    icon: ClipboardListIcon,
+  },
+  {
+    name: "指南",
+    href: "#",
+    description:
+      "涵盖流行设置的安装指南，就像为您量身定制的入门地图，助您轻松上手。",
+    icon: BookMarkedIcon,
+  },
+  {
+    name: "博客",
+    href: "#",
+    description: "探索我们的最新动态与深度文章。",
+    icon: RssIcon,
+  },
+];
+const social = [
+  {
+    name: "GitHub",
+    href: "https://github.com/NGC2207/judge4c",
+    icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+      <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+        <path
+          fillRule="evenodd"
+          d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+          clipRule="evenodd"
+        />
+      </svg>
+    ),
+  },
+];
+
+export default function NotFoundPage() {
+  return (
+    <div>
+      <main className="mx-auto w-full pt-4">
+        <div className="flex flex-row items-center gap-x-16 mx-auto justify-center">
+          <Image
+            alt="Judge4c"
+            src="/litchi.svg"
+            width={120}
+            height={120}
+            className="h-10 w-auto sm:h-12"
+          />
+          <p className="font-bold text-4xl">404</p>
+        </div>
+        <div className="mx-auto text-center">
+          <h1 className="mt-6 text-balance text-6xl font-semibold tracking-tight">
+            这个页面迷失了...
+          </h1>
+          <p className="mt-4 text-pretty text-lg font-medium text-foreground/50 sm:text-xl/8">
+            或许您可以尝试其他航线？
+          </p>
+        </div>
+        <div className="mx-auto mt-8 flow-root max-w-lg">
+          <h2 className="sr-only">Popular pages</h2>
+          <ul role="list" className="-mt-6 divide-y divide-border border-b">
+            {links.map((link, linkIdx) => (
+              <li key={linkIdx} className="relative flex gap-x-6 py-6">
+                <div className="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
+                  <link.icon
+                    aria-hidden="true"
+                    className="h-6 w-6 text-pink-400"
+                  />
+                </div>
+                <div className="flex-auto">
+                  <h3 className="text-sm/6 font-semibold">
+                    <a href={link.href}>
+                      <span aria-hidden="true" className="absolute inset-0" />
+                      {link.name}
+                    </a>
+                  </h3>
+                  <p className="mt-2 text-sm/6 text-foreground/60">
+                    {link.description}
+                  </p>
+                </div>
+                <div className="flex-none self-center">
+                  <ChevronRightIcon
+                    aria-hidden="true"
+                    className="h-5 w-5 text-foreground/40"
+                  />
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </main>
+      <footer className="pt-10">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-center gap-8 px-6 sm:flex-row lg:px-8">
+          <p className="text-sm/7 text-foreground/40">
+            &copy; Judge4c, Ngc. All rights reserved.
+          </p>
+          <div className="hidden sm:block sm:h-7 sm:w-px sm:flex-none sm:bg-foreground/20" />
+          <div className="flex gap-x-4">
+            {social.map((item, itemIdx) => (
+              <a
+                key={itemIdx}
+                href={item.href}
+                className="text-foreground/40 hover:text-foreground/50"
+              >
+                <span className="sr-only">{item.name}</span>
+                <item.icon aria-hidden="true" className="h-6 w-6" />
+              </a>
+            ))}
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}