Fix design of 404 page

PullJosh · Jul 6, 2024 · 77c36d8 · 77c36d8
1 parent af89dc8
commit 77c36d8
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,21 +1,24 @@
+import Center from "../components/Center";
 import { Footer } from "../components/Footer";
 import Nav from "../components/Nav";
+import TopBorder from "../components/TopBorder";
 
 export default function NotFound() {
   return (
-    <>
-      <div className="border-b border-gray-300">
-        <Nav title="Leopard" />
-      </div>
-      <div className="mt-8">
-        <div className="mx-auto max-w-4xl px-8">
-          <h1 className="text-4xl font-bold">404 - Not Found</h1>
-          <p className="mt-4">
-            The page you were looking for could not be found.
-          </p>
+    <div className="flex min-h-screen flex-col">
+      <TopBorder />
+      <Nav title="Leopard" />
+      <div className="flex-grow">
+        <div className="my-8">
+          <Center>
+            <div className="prose">
+              <h1>404 - Not Found</h1>
+              <p>The page you were looking for could not be found.</p>
+            </div>
+          </Center>
         </div>
       </div>
       <Footer />
-    </>
+    </div>
   );
 }