Added custom 404 page (#410)

Closes #282

demo: https://csclub.uwaterloo.ca/~a3thakra/csc/404page/404/
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #410
Reviewed-by: j285he <j285he@localhost>
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>

pages/404.module.css

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: calc(60rem / 16);
+}
+
+.codey {
+  width: calc(380rem / 16);
+  padding: calc(20rem / 16);
+  padding-right: 0;
+}
+
+.heading {
+  margin-top: 0;
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .container {
+    flex-direction: column;
+    padding-bottom: calc(30rem / 16);
+  }
+
+  .codey {
+    padding: calc(20rem / 16) 0;
+  }
+}

pages/404.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { Image } from "@/components/Image";
+import { Link } from "@/components/Link";
+import { Title } from "@/components/Title";
+
+import styles from "./404.module.css";
+
+export default function Custom404() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.text}>
+        <Title>404: Page Not Found</Title>
+        <h2>Error 404</h2>
+        <h1 className={styles.heading}>
+          We couldn’t find the page you’re looking for!
+        </h1>
+        <p>
+          <Link href="/">Click here to go back to the main page.</Link>
+        </p>
+      </div>
+
+      <Image src="images/codey-404.svg" className={styles.codey} />
+    </div>
+  );
+}