From 8d4295787cc5105e3916838105bfdecc85130b35 Mon Sep 17 00:00:00 2001
From: dora <d43su@uwaterloo.ca>
Date: Sun, 27 Jun 2021 05:20:27 -0400
Subject: [PATCH] email signup component

---
 components/EmailSignup.module.css | 61 +++++++++++++++++++++++++++++++
 components/EmailSignup.tsx        | 19 ++++++++++
 pages/_app.css                    |  4 ++
 pages/get-involved.module.css     | 12 ++++++
 pages/get-involved.tsx            | 14 +++++--
 5 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 components/EmailSignup.module.css
 create mode 100644 components/EmailSignup.tsx

diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css
new file mode 100644
index 00000000..d97883d7
--- /dev/null
+++ b/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);
+} */
diff --git a/components/EmailSignup.tsx b/components/EmailSignup.tsx
new file mode 100644
index 00000000..b16d3280
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/pages/_app.css b/pages/_app.css
index 664bdb16..5d3df978 100644
--- a/pages/_app.css
+++ b/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%,
diff --git a/pages/get-involved.module.css b/pages/get-involved.module.css
index f086e5ec..c2d80824 100644
--- a/pages/get-involved.module.css
+++ b/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)) {
 }
diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx
index a2925784..6f45b4b5 100644
--- a/pages/get-involved.tsx
+++ b/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>
   );
 }