feat: redesign error 404 page (#461)

Co-authored-by: Erick Zhao <erick@hotmail.ca>
Co-authored-by: Black-Hole️ <bh@bugs.cc>

src/theme/NotFound.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Translate, { translate } from '@docusaurus/Translate';
+import { PageMetadata } from '@docusaurus/theme-common';
+import errorImage from '../../static/assets/img/404.webp';
+import './notFound.scss';
+import Layout from '@theme/Layout';
+export default function NotFound() {
+  return (
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+      <Layout>
+        <main className="container margin-vert--xl">
+          <div className="row">
+            <div className="col">
+              <img src={errorImage} alt=""></img>
+            </div>
+            <div className="col col--7">
+              <h1 className="hero__title notFoundTitle">
+                <Translate
+                  id="theme.NotFound.title"
+                  description="The title of the 404 page"
+                >
+                  Page Not Found
+                </Translate>
+              </h1>
+              <p>
+                <Translate
+                  id="theme.NotFound.p1"
+                  description="The first paragraph of the 404 page"
+                >
+                  We could not find what you were looking for. Erick.
+                </Translate>
+              </p>
+              <p>
+                <Translate
+                  id="theme.NotFound.p2"
+                  description="The 2nd paragraph of the 404 page"
+                >
+                  Please contact the owner of the site that linked you to the
+                  original URL and let them know their link is broken.
+                </Translate>
+              </p>
+            </div>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}

src/theme/notFound.scss

@@ -0,0 +1,4 @@
+.notFoundTitle {
+  color: var(--ifm-color-primary-lighter);
+  font-weight: bold;
+}