Feature/jaredsbt/invalid ur lto404

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import {
   Candidates,
   Login,
   PrescreeningForm,
+  RedirectTo404,
   ThankyouForApplying,
 } from "./pages/index.ts";
 
@@ -34,6 +35,7 @@ function App() {
               <Route path="candidates" element={<Candidates />} />
               <Route path="prescreening" element={<PrescreeningForm />} />
               <Route path="ThankyouForApplying" element={<ThankyouForApplying />} />
+              <Route path="*" element={<RedirectTo404 />} />
             </Route>
             <Route path="login" element={<Login />} />
           </Routes>

frontend/src/globals.css

@@ -10,6 +10,7 @@
   --color-accent: #b4b4b4;
   --color-error: #fc3030;
   --color-red-secondary: #ce2e21;
+  --color-red-tertiary: #782420;
   --color-shadow: #d8d8d8;
   --color-link: #2a61bb;
   --font-title: normal bold 2rem "Rubik", sans-serif;
@@ -19,6 +20,8 @@
   --font-body: normal 400 1rem "Rubik", sans-serif;
   --font-nav: "Roboto", sans-serif;
   --font-title-medium: 700 1.75rem "Rubik";
+  --font-error-num: 700 7.5rem "Rubik";
+  --font-error-type: 700 4rem "Rubik";
 }
 
 * {

frontend/src/pages/Candidates.tsx

@@ -59,7 +59,7 @@ export function Candidates() {
       </p>
       <div className={styles.centeredContainer}>
         <NavLink className={styles.navLink} to={"/prescreening"}>
-          <Button onClick={null}>Apply Now</Button>
+          <Button onClick={undefined}>Apply Now</Button>
         </NavLink>
       </div>
       <div className={styles.textDivider2}>
@@ -109,7 +109,7 @@ export function Candidates() {
 
       <div className={styles.centeredContainer}>
         <NavLink className={styles.navLink} to={"/prescreening"}>
-          <Button onClick={null}>Discover Your Ideal Pathway</Button>
+          <Button onClick={undefined}>Discover Your Ideal Pathway</Button>
         </NavLink>
       </div>
 

frontend/src/pages/RedirectTo404.tsx

@@ -0,0 +1,26 @@
+import { Page } from "../components";
+import styles from "../stylesheets/RedirectTo404.module.css";
+
+export function RedirectTo404() {
+  return (
+    <Page>
+      <div className={styles.errorMessageContainer}>
+        <h1 className={styles.errorType}>404</h1>
+        <h2 className={styles.errorReason}>Page Not Found</h2>
+        <p className={styles.errorMessage}>
+          Sorry, we couldn&apos;t find the page you&apos;re looking for, click{" "}
+          <a className={styles.lightBlue} href="https://ccidc.org/">
+            here.
+          </a>
+          <br />
+          Please ensure that the URL is correct and try again.
+        </p>
+      </div>
+
+      <div className={styles.topLeftRec}></div>
+      <div className={styles.bottomLeftRec}></div>
+      <div className={styles.topRightRec}></div>
+      <div className={styles.bottomRightRec}></div>
+    </Page>
+  );
+}

frontend/src/pages/index.ts

@@ -2,15 +2,15 @@ import { Application } from "./Application.tsx";
 import { Candidates } from "./Candidates.tsx";
 import { Login } from "./Login.tsx";
 import { PrescreeningForm } from "./PrescreeningForm.tsx";
-import { TestCongratulations } from "./TestCongratulations.tsx";
+import { RedirectTo404 } from "./RedirectTo404.tsx";
 import { TestModals } from "./TestModals.tsx";
 import { ThankyouForApplying } from "./ThankyouForApplying.tsx";
 export {
   Application,
   Candidates,
-  TestCongratulations,
   ThankyouForApplying,
   PrescreeningForm,
   Login,
+  RedirectTo404,
   TestModals,
 };

frontend/src/stylesheets/RedirectTo404.module.css

@@ -0,0 +1,81 @@
+.errorMessageContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+}
+
+.errorType {
+  margin-top: 1.5em;
+  color: var(--color-red-tertiary);
+  font: var(--font-error-num);
+}
+
+.errorReason {
+  margin-top: 0;
+  color: var(--color-ccidc-red);
+  font: var(--font-error-type);
+}
+
+.errorMessage {
+  color: var(--color-red-tertiary);
+  text-align: center;
+}
+
+.lightBlue {
+  color: var(--color-ccidc-blue);
+}
+
+.leftCorner {
+  width: 100%;
+}
+
+.rightCorner {
+  width: 100%;
+}
+
+.topLeftRec {
+  position: absolute;
+  width: 600px;
+  height: 40px;
+  top: 465px;
+  left: -125px;
+  gap: 0px;
+  opacity: 0px;
+  transform: rotate(50deg);
+  background-color: #b4b4b4;
+}
+
+.bottomLeftRec {
+  position: absolute;
+  width: 500px;
+  height: 40px;
+  top: 848px;
+  left: -95px;
+  gap: 0px;
+  opacity: 0px;
+  transform: rotate(-40deg);
+  background-color: #b4b4b4;
+}
+
+.topRightRec {
+  position: absolute;
+  width: 500px;
+  height: 40px;
+  top: 275px;
+  right: -71px;
+  transform: rotate(-40deg);
+  background-color: #6c6c6c;
+  overflow: hidden;
+}
+
+.bottomRightRec {
+  position: absolute;
+  width: 600px;
+  height: 40px;
+  top: 646.5px;
+  right: -115px;
+  transform: rotate(-135deg);
+  background-color: #6c6c6c;
+  overflow: hidden;
+}