Use ConnectWithUs and EmailSignup components on the /about page (#93)

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

components/DefaultLayout.module.css

@@ -2,5 +2,4 @@
   margin: 0 auto;
   max-width: calc(800rem / 16);
   padding: 0 calc(20rem / 16);
-  padding-bottom: calc(20rem / 16);
 }

pages/about/index.module.css

@@ -1,3 +1,7 @@
+.page {
+  margin-bottom: calc(20rem / 16);
+}
+
 .title {
   height: calc(80rem / 16);
   margin-top: auto;
@@ -31,33 +35,6 @@
   height: calc(400rem / 16);
 }
 
-/*for temp mailing list components*/
-.mailingList {
-  margin: calc(4rem / 16) auto;
-  max-width: calc(806rem / 16);
-}
-
-.mailingList form > * {
-  margin: calc(0.5rem / 16) auto;
-}
-
-.mailingList form input {
-  border-radius: calc(16rem / 16);
-  padding: calc(8rem / 16) 0;
-}
-
-.mailingList form input[type="text"] {
-  /*temporary hard coding of font*/
-  font-family: Poppins;
-  font-style: normal;
-  padding: 0 calc(8rem / 16);
-}
-
-.mailingList h2 {
-  color: var(--blue-2);
-}
-/*for temp mailing list components*/
-
 @media only screen and (max-width: calc(768rem / 16)) {
   .titleContainer {
     display: flex;

pages/about/index.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { Image } from "../../components/Image";
 import Content from "../../content/about/index.mdx";
 import styles from "./index.module.css";
-import { Button } from "../../components/Button";
-import { SocialLinks } from "../../components/SocialLinks";
+import { ConnectWithUs } from "components/ConnectWithUs";
+import { EmailSignup } from "components/EmailSignup";
+import { DefaultLayout } from "components/DefaultLayout";
 
 export default function AboutUs() {
   return (
@@ -15,29 +16,14 @@ export default function AboutUs() {
       <div className={styles.content}>
         <Content />
       </div>
-      <div className={styles.mailingList}>
-        <h2>Connect with us!</h2>
-        <p>
-          Drop by any of our social media outlets to learn more about us, keep
-          up-to-date with our upcoming events, or to chat with our members!
-        </p>
-        <SocialLinks color="gradient" size="big" />
-        <p>Send feedback through our Feedback Form </p>
-        <h2>Join our Mailing List!</h2>
-        <form action="">
-          <div>
-            <input type="text" placeholder="Full Name*" required />
-          </div>
-          <div>
-            <input type="text" placeholder="Email*" required />
-          </div>
-          <Button>Subscribe</Button>
-        </form>
-      </div>
+      <DefaultLayout>
+        <ConnectWithUs />
+        <EmailSignup />
+      </DefaultLayout>
     </>
   );
 }
 
 AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
-  return <div>{props.children}</div>;
+  return <div className={styles.page}>{props.children}</div>;
 };