fix: pageNotFound

src/App.tsx

@@ -4,6 +4,7 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Server from "./pages/Server";
 import ServerDetail from "./pages/ServerDetail";
+import NotFound from "./pages/NotFound";
 
 const App: React.FC = () => {
   return (
@@ -14,6 +15,7 @@ const App: React.FC = () => {
           <Routes>
             <Route path="/" element={<Server />} />
             <Route path="/server/:id" element={<ServerDetail />} />
+            <Route path="*" element={<NotFound />} />
           </Routes>
           <Footer />
         </main>

src/components/Header.tsx

@@ -7,13 +7,18 @@ import { DateTime } from "luxon";
 import { useEffect, useRef, useState } from "react";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 function Header() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
-        <section className="flex items-center text-base font-medium">
+        <section
+          onClick={() => navigate("/")}
+          className="cursor-pointer flex items-center text-base font-medium"
+        >
           <div className="mr-1 flex flex-row items-center justify-start">
             <img
               width={40}

src/locales/en/translation.json

@@ -53,5 +53,9 @@
     "light": "Light",
     "dark": "Dark",
     "system": "System"
+  },
+  "error": {
+    "pageNotFound": "Page not found",
+    "backToHome": "Back to home"
   }
 }

src/locales/zh-CN/translation.json

@@ -53,5 +53,9 @@
     "light": "亮色",
     "dark": "暗色",
     "system": "跟随系统"
+  },
+  "error": {
+    "pageNotFound": "页面不存在",
+    "backToHome": "回到主页"
   }
 }

src/locales/zh-TW/translation.json

@@ -53,5 +53,9 @@
     "light": "亮色",
     "dark": "暗色",
     "system": "跟隨系統"
+  },
+  "error": {
+    "pageNotFound": "頁面不存在",
+    "backToHome": "回到主頁"
   }
 }

src/pages/NotFound.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export default function NotFound() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex  flex-col items-center justify-center">
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-4xl font-semibold">404</h1>
+        <p className="text-xl text-muted-foreground">
+          {t("error.pageNotFound")}
+        </p>
+        <Button onClick={() => navigate("/")} className="mt-2">
+          {t("error.backToHome")}
+        </Button>
+      </div>
+    </div>
+  );
+}