Add EmailSignup link (#175)

Also changed the `XXX@XXX.COM` in the footer to `exec@csclub.uwaterloo.ca`.

Closes #129

Co-authored-by: Amy <a258wang@uwaterloo.ca>
Reviewed-on: www/www-new#175
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>

components/EmailSignup.module.css

@@ -1,7 +1,3 @@
-.container form {
-  box-sizing: border-box;
-}
-
 .header {
   color: var(--primary-accent);
   font-weight: 600;
@@ -9,8 +5,9 @@
 }
 
 .button {
-  margin-top: calc(34rem / 16);
+  margin-top: calc(26rem / 16);
   display: block;
+  width: fit-content;
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {

components/EmailSignup.tsx

@@ -1,21 +1,24 @@
 import React from "react";
 
 import { Button } from "./Button";
-import { Input } from "./Input";
 
 import styles from "./EmailSignup.module.css";
 
 export function EmailSignup() {
   return (
     <section className={styles.container}>
-      <h1 className={styles.header}>Join Our Mailing List!</h1>
-      <form className={styles.form} action="">
-        <Input type="text" placeholder="Full Name*" required />
-        <Input type="email" placeholder="Email*" required />
-        <Button type="submit" className={styles.button}>
-          Subscribe
-        </Button>
-      </form>
+      <h1 className={styles.header}>Join our mailing list!</h1>
+      <p>
+        Join our mailing list to receive email notifications about important
+        news and upcoming events!
+      </p>
+      <Button
+        isLink={true}
+        href="https://mailman.csclub.uwaterloo.ca/postorius/lists/csc-general.csclub.uwaterloo.ca/"
+        className={styles.button}
+      >
+        Subscribe
+      </Button>
     </section>
   );
 }

components/Footer.module.css

@@ -23,6 +23,11 @@
   text-align: center;
 }
 
+.email {
+  color: unset;
+  text-decoration: unset;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .footer {
     height: calc(120rem / 16);

components/Footer.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 import { SocialLinks } from "./SocialLinks";
@@ -9,7 +10,10 @@ export function Footer() {
     <footer className={styles.footer}>
       <div className={styles.container}>
         <div className={styles.text}>
-          Have questions? Email us at XX@XXX.COM
+          Have questions? Email us at{" "}
+          <Link href="mailto:exec@csclub.uwaterloo.ca">
+            <a className={styles.email}>exec@csclub.uwaterloo.ca</a>
+          </Link>
         </div>
         <SocialLinks color="white" size="small" />
       </div>