feat: add 404 page (#172)

* feat: add 404 page

* fixup!

* add "report an issue" button

Author: TusharThakur04

components/Layout.jsx

@@ -3,13 +3,15 @@ import HomeLayout from '../layouts/Home/index.jsx';
 import SponsorsLayout from '../layouts/Sponsors/index.jsx';
 import BlogLayout from '../layouts/Blog/index.jsx';
 import PostLayout from '../layouts/Post/index.jsx';
+import PageNotFoundLayout from '../layouts/PageNotFound/index.jsx';
 import '../styles/index.css';
 
 const LAYOUTS = {
   home: HomeLayout,
   sponsors: SponsorsLayout,
   blog: BlogLayout,
   post: PostLayout,
+  404: PageNotFoundLayout,
 };
 
 export default function Layout(props) {

layouts/PageNotFound/index.jsx

@@ -0,0 +1,34 @@
+import NavBar from '../../components/NavBar';
+import BaseButton from '@node-core/ui-components/Common/BaseButton';
+import styles from './index.module.css';
+
+export default ({ metadata }) => {
+  return (
+    <>
+      <NavBar metadata={metadata} />
+      <main className={styles.container}>
+        <div className={styles.content}>
+          <h1 className={styles.errorCode}>404</h1>
+          <h2 className={styles.title}>Page Not Found</h2>
+
+          <p className={styles.description}>
+            Oops! The page you are looking for might have been moved, deleted,
+            or was simply never included in the chunk.
+          </p>
+
+          <div className={styles.actions}>
+            <BaseButton href="/" kind="primary">
+              Go to Home
+            </BaseButton>
+            <BaseButton
+              href="https://github.com/webpack/webpack-doc-kit/issues/new/choose"
+              kind="neutral"
+            >
+              Report an issue
+            </BaseButton>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

layouts/PageNotFound/index.module.css

@@ -0,0 +1,56 @@
+@reference "../../styles/index.css";
+
+.container {
+  @apply flex
+    items-center
+    justify-center
+    min-h-[calc(100vh-64px)]
+    px-6
+    py-20;
+}
+
+.content {
+  @apply flex
+    flex-col
+    items-center
+    text-center
+    w-full
+    max-w-2xl
+    gap-6;
+}
+
+.errorCode {
+  @apply text-8xl
+    md:text-9xl
+    font-black
+    tracking-tighter
+    text-blue-600
+    dark:text-blue-500
+    drop-shadow-sm
+    leading-none;
+}
+
+.title {
+  @apply text-3xl
+    md:text-4xl
+    font-bold
+    text-neutral-900
+    dark:text-neutral-50
+    tracking-tight
+    p-1;
+}
+
+.description {
+  @apply text-lg
+    text-neutral-600
+    dark:text-neutral-400
+    max-w-lg;
+}
+
+.actions {
+  @apply mt-4
+    justify-center
+    items-center
+    flex
+    gap-6;
+}