Create UnregisteredUserPage to take in user and resemble login page

Author: benkoppe

frontend/src/components/Onboarding/UnregisteredUserPage.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styles from './unregistereduserpage.module.css';
+import { logo } from '../../icons/other';
+import { WAVE_PATH } from '../../util/constants';
+import { UnregisteredUser } from '../../types/index';
+
+interface UnregisteredUserProps {
+  user: UnregisteredUser;
+  onBack: () => void;
+}
+
+const UnregisteredUserPage: React.FC<UnregisteredUserProps> = ({
+  user,
+  onBack,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <img src={logo} className={styles.logo} alt="Carriage logo" />
+
+        <h1 className={styles.greeting}>
+          Hello {user.name}, you are not registered for Carriage
+        </h1>
+
+        <div className={styles.message}>
+          <p>
+            Sorry, you are not a registered Carriage user. To sign up, please
+            come to Student Disability Services office in Level 5 of the Cornell
+            Health Building.
+          </p>
+          <p className={styles.contact}>
+            Call <a href="tel:607-254-4545">607-254-4545</a> or email{' '}
+            <a href="mailto:carriage@cornell.edu">carriage@cornell.edu</a> if
+            you have any questions.
+          </p>
+        </div>
+
+        <button onClick={onBack} className={styles.backButton}>
+          Back to Login
+        </button>
+      </div>
+
+      <div className={styles.customShape}>
+        <svg
+          data-name="Layer 1"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1200 120"
+          preserveAspectRatio="none"
+        >
+          <path d={WAVE_PATH.trim()} className={styles.shapeFill}></path>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default UnregisteredUserPage;

frontend/src/components/Onboarding/unregistereduserpage.module.css

@@ -0,0 +1,120 @@
+.container {
+  position: relative;
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url(../../pages/Landing/campus.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 0 1.25rem;
+}
+
+.card {
+  border: 1px solid black;
+  border-radius: 16px;
+  background: white;
+  max-width: 700px;
+  width: 100%;
+  margin-top: 7.5rem;
+  padding: 48px;
+  text-align: center;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.16);
+}
+
+.logo {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 24px;
+}
+
+.greeting {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 32px;
+  line-height: 1.4;
+}
+
+.message {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #666;
+  margin-bottom: 32px;
+}
+
+.message p {
+  margin-bottom: 16px;
+}
+
+.contact {
+  margin-top: 24px;
+}
+
+.contact a {
+  color: #0075db;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.contact a:hover {
+  text-decoration: underline;
+}
+
+.backButton {
+  color: white;
+  background-color: black;
+  border: 0.063rem solid #000000;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+  min-width: 6.563rem;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+
+.backButton:focus {
+  box-shadow: 0 0 0 3px #0075db;
+}
+
+.backButton:hover {
+  background-color: #333;
+}
+
+.customShape {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  transform: rotate(180deg);
+  height: 15%;
+  z-index: 10;
+}
+
+.customShape svg {
+  position: absolute;
+  display: block;
+  width: calc(142% + 1.3px);
+}
+
+.shapeFill {
+  fill: white;
+}
+
+@media (max-width: 600px) {
+  .card {
+    margin-top: 2rem;
+    padding: 32px 24px;
+  }
+
+  .greeting {
+    font-size: 24px;
+  }
+}