email signup component

components/EmailSignup.module.css

@@ -0,0 +1,61 @@
+.container form {
+  box-sizing: border-box;
+}
+
+.container > * {
+  margin: 0 0 calc(21rem / 16) 0;
+}
+
+.header {
+  color: var(--blue-2);
+  font-weight: 600;
+  margin: 0 0 calc(21rem / 16) 0;
+}
+
+.form input {
+  display: block;
+  width: 100%;
+  margin: calc(21rem / 16) 0;
+
+  box-sizing: border-box;
+  border: 0;
+  border-radius: calc(20rem / 16);
+
+  background-color: var(--grey-24);
+}
+
+.form input::placeholder {
+  color: var(--grey);
+  font-weight: 700;
+}
+
+.form input[type="text"],
+.form input[type="email"] {
+  padding: calc(10rem / 16) calc(31rem / 16);
+  font-family: Poppins;
+
+  font-size: calc(18rem / 16);
+  line-height: calc(30rem / 16);
+  color: var(--dark-grey);
+}
+
+.form input:is(:active, :hover, :focus) {
+  box-sizing: border-box;
+  border: calc(3rem / 16) solid var(--blue-1);
+  border-radius: calc(20rem / 16);
+  outline: none;
+  padding: calc(7rem / 16) calc(28rem / 16);
+}
+
+.button {
+  margin-top: calc(34rem / 16);
+}
+
+/* TODO: make this only happen if the form is clicked on? */
+/* .form input:invalid {
+  box-sizing: border-box;
+  border: calc(3rem / 16) solid var(--red);
+  border-radius: calc(20rem / 16);
+  outline: none;
+  padding: calc(7rem / 16) calc(28rem / 16);
+} */

components/EmailSignup.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./EmailSignup.module.css";
+import { Button } from "./Button";
+
+export function EmailSignup() {
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.header}>Join Our Mailing List!</h2>
+      <form className={styles.form} action="">
+        <input type="text" placeholder="Full Name*" required />
+        <input type="email" placeholder="Email*" required />
+
+        <div className={styles.button}>
+          <Button>Subscribe</Button>
+        </div>
+      </form>
+    </div>
+  );
+}

pages/_app.css

@@ -13,6 +13,10 @@ body {
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --black: #000000;
+  --grey: #bbbbbb;
+  --grey-24: rgba(196, 196, 196, 0.24);
+  --dark-grey: #6b6b6b;
+  --red: #9f616a;
   --gradient-blue-green: linear-gradient(
     99.94deg,
     #1481e3 -17.95%,

pages/get-involved.module.css

@@ -41,5 +41,17 @@
   margin: 0;
 }
 
+.connectWithUs {
+  margin-bottom: calc(21rem / 16);
+}
+
+.emailSignup {
+  margin-bottom: calc(57.81rem / 16);
+}
+
+.pageContainer {
+  margin-top: calc(172rem / 16);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
 }

pages/get-involved.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import { Image } from "../components/Image";
 import { Link } from "../components/Link";
 import { ConnectWithUs } from "../components/ConnectWithUs";
+import { EmailSignup } from "../components/EmailSignup";
 import Content from "../content/get-involved.mdx";
 import styles from "./get-involved.module.css";
 
 export default function GetInvolved() {
   return (
-    <>
+    <div className={styles.pageContainer}>
       <div className={styles.headerContainer}>
         <div className={styles.headerText}>
           <h1>Get Involved!</h1>
@@ -17,13 +18,18 @@ export default function GetInvolved() {
             <Link href="/about/team">Programme Committee</Link>!
           </p>
         </div>
-        {/* FIX CODEY SINCE ITS NOT SVG */}
+        {/* TODO: FIX CODEY SINCE ITS NOT SVG */}
         <Image src="images/get-involved-codey.svg" className={styles.codey} />
       </div>
       <div className={styles.content}>
         <Content />
       </div>
-      <ConnectWithUs />
-    </>
+      <div className={styles.connectWithUs}>
+        <ConnectWithUs />
+      </div>
+      <div className={styles.emailSignup}>
+        <EmailSignup />
+      </div>
+    </div>
   );
 }