Create 404 Page

app/layout.tsx

@@ -28,7 +28,7 @@ export default function RootLayout({
         <ThemeProvider attribute="class">
           <Header />
 
-          <main className="w-full min-h-[calc(100vh-144px)] mt-36 bg-slate-50 dark:bg-[#080f15]">
+          <main className="w-full mt-36 bg-slate-50 dark:bg-[#080f15]">
             <div className="w-full max-w-[1432px] sm:max-w-[1464px] mx-auto h-full px-4 sm:px-8 py-8 sm:py-16">
               {children}
             </div>

app/not-found.tsx

@@ -1,7 +1,27 @@
-const NotFoundPage = () => (
-  <div className="w-full h-full">
-    <p>404 Page</p>
-  </div>
-)
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { Button } from '@/components/button'
+
+import NotFoundImage from '@/public/404.svg'
+
+const NotFoundPage = () => {
+  const router = useRouter()
+
+  return (
+    <div className="w-full flex flex-col items-center justify-center gap-6 p-10 bg-white dark:bg-midnight-slate rounded-3xl">
+      <NotFoundImage className="w-full max-w-[342px] h-auto" />
+      <p className="text-black dark:text-white text-lg font-medium">
+        Page Not Found!
+      </p>
+      <Button
+        label="Go to Home"
+        variant="primary"
+        onClick={() => router.push('/')}
+      />
+    </div>
+  )
+}
 
 export default NotFoundPage