From e02ef11d9f7417789d0a0e3b549d9a715c863d01 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Sat, 8 Feb 2025 19:16:12 +0800
Subject: [PATCH] 404 page

---
 AceJobAgency.client/.npmrc                  |  2 +-
 AceJobAgency.client/src/App.tsx             |  2 ++
 AceJobAgency.client/src/pages/ErrorPage.tsx | 35 +++++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 AceJobAgency.client/src/pages/ErrorPage.tsx

diff --git a/AceJobAgency.client/.npmrc b/AceJobAgency.client/.npmrc
index cb15887..7cb61a2 100644
--- a/AceJobAgency.client/.npmrc
+++ b/AceJobAgency.client/.npmrc
@@ -1 +1 @@
-public-hoist-pattern[]=*@nextui-org/*
\ No newline at end of file
+public-hoist-pattern[]=*@heroui/*
\ No newline at end of file
diff --git a/AceJobAgency.client/src/App.tsx b/AceJobAgency.client/src/App.tsx
index dd1f01c..b33c6bf 100644
--- a/AceJobAgency.client/src/App.tsx
+++ b/AceJobAgency.client/src/App.tsx
@@ -1,6 +1,7 @@
 import { Route, Routes } from "react-router-dom";
 import DefaultLayout from "./layouts/DefaultLayout";
 import HomePage from "./pages/HomePage";
+import ErrorPage from "./pages/ErrorPage";
 
 export default function App() {
   return (
@@ -9,6 +10,7 @@ export default function App() {
         <Route path="/">
           <Route element={<DefaultLayout />}>
             <Route index element={<HomePage />} />
+            <Route path="*" element={<ErrorPage />} />
           </Route>
         </Route>
       </Route>
diff --git a/AceJobAgency.client/src/pages/ErrorPage.tsx b/AceJobAgency.client/src/pages/ErrorPage.tsx
new file mode 100644
index 0000000..0202b8f
--- /dev/null
+++ b/AceJobAgency.client/src/pages/ErrorPage.tsx
@@ -0,0 +1,35 @@
+import { Button, Card } from "@heroui/react";
+import { useNavigate } from "react-router-dom";
+
+export default function ErrorPage() {
+  const navigate = useNavigate();
+  return (
+    <div className="absolute inset-0 w-full h-full flex flex-col justify-center">
+      <div className="relative m-auto w-max h-max flex flex-col gap-8 justify-center text-center *:mx-auto">
+        <div className="flex flex-col gap-2">
+          <p className="opacity-70 text-lg">Error 404 - Not Found</p>
+          <p className="text-4xl font-bold">Something's not right!</p>
+          <p className="text-xl">What you're looking for is not here.</p>
+        </div>
+        <Card className="flex flex-row gap-4 justify-center w-max p-4">
+          <Button
+            variant="light"
+            onPress={() => {
+              navigate(-1);
+            }}
+          >
+            Go back
+          </Button>
+          <Button
+            color="primary"
+            onPress={() => {
+              navigate("/");
+            }}
+          >
+            Go home
+          </Button>
+        </Card>
+      </div>
+    </div>
+  );
+}