Update 404

src/components/notfound/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Crash from "./crash.svg";
+import Styles from "./index.module.css";
+
+export default function() {
+    return <main className={Styles.root}>
+        <h1 className={Styles.heading}>Oh, bonkers!</h1>
+        <Crash className={Styles.crash} />
+        <div className={Styles.lower}>
+            <div>Let's get you back on the right track.</div>
+            <a href={"/"}><button className="button">Go Home</button></a>
+        </div>
+    </main>
+}

src/components/notfound/index.module.css

@@ -0,0 +1,36 @@
+.root {
+    display: flex;
+    flex-grow: 1;
+
+    padding-top: 50px;
+    padding-bottom: 50px;
+
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    gap: 20px;
+}
+
+.crash {
+    width: 80vw;
+    height: 80vw;
+    max-width: 128px;
+    max-height: 128px;
+    opacity: 0.5;
+
+    --svg-fg: var(--ifm-font-color-base);
+}
+
+.heading {
+    margin: 0;
+}
+
+.lower {
+    display: flex;
+
+    flex-direction: column;
+    align-items: center;
+
+    gap: 9px;
+}

src/theme/NotFound.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import CustomNotFound from '@site/src/components/notfound'
+export default function NotFound() {
+  return (
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+      <Layout>
+        <CustomNotFound />
+      </Layout>
+    </>
+  );
+}