components/ConnectWithUs.module.css

@@ -0,0 +1,21 @@
+.header {
+  color: var(--blue-2);
+  font-weight: 600;
+  font-size: calc(36rem / 16);
+  margin-bottom: calc(12rem / 16);
+}
+
+.socialLinks {
+  margin: calc(36rem / 16) 0;
+  line-height: 0;
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .header {
+    font-size: calc(24rem / 16);
+  }
+
+  .socialLinks {
+    margin: 1rem 0;
+  }
+}

components/ConnectWithUs.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "./ConnectWithUs.module.css";
+import { SocialLinks } from "./SocialLinks";
+import { Link } from "./Link";
+
+export function ConnectWithUs() {
+  return (
+    <section>
+      <h1 className={styles.header}>Connect with us!</h1>
+      <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>
+
+      <div className={styles.socialLinks}>
+        <SocialLinks color="gradient" size="big" />
+      </div>
+
+      {/* TODO: fix feedback form link  */}
+      <p>
+        Send feedback through our <Link href="#">Feedback Form</Link>
+      </p>
+    </section>
+  );
+}

components/EmailSignup.module.css

@@ -0,0 +1,25 @@
+.container form {
+  box-sizing: border-box;
+}
+
+.header {
+  color: var(--blue-2);
+  font-weight: 600;
+  font-size: calc(36rem / 16);
+  margin-bottom: calc(12rem / 16);
+}
+
+.button {
+  margin-top: calc(34rem / 16);
+  display: block;
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .header {
+    font-size: calc(24rem / 16);
+  }
+
+  .button {
+    margin-top: calc(20rem / 16);
+  }
+}

components/EmailSignup.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./EmailSignup.module.css";
+import { Button } from "./Button";
+import { Input } from "./Input";
+
+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>
+    </section>
+  );
+}

components/Input.module.css

@@ -0,0 +1,37 @@
+.input {
+  display: block;
+  width: 100%;
+  margin: calc(21rem / 16) 0;
+  padding: calc(10rem / 16) calc(32rem / 16);
+
+  box-sizing: border-box;
+  border: 0;
+  border-radius: calc(20rem / 16);
+
+  background-color: var(--grey-1-24);
+  font-size: calc(18rem / 16);
+  line-height: calc(30rem / 16);
+  color: var(--grey-3);
+}
+
+.input::placeholder {
+  color: var(--grey-2);
+  font-weight: 700;
+}
+
+.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);
+}
+
+/* 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/Input.tsx

@@ -0,0 +1,8 @@
+import React, { InputHTMLAttributes } from "react";
+import styles from "./Input.module.css";
+
+export function Input(props: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input {...props} className={`${styles.input} ${props.className ?? ""}`} />
+  );
+}

components/SocialLinks.module.css

@@ -1,12 +1,15 @@
 .link,
 .links {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
 }
 
-.links > * {
-  margin: 0 calc(10rem / 16);
+.link {
+  margin-left: calc(20rem / 16);
+}
+
+.link:first-child {
+  margin-left: 0;
 }
 
 .big > * {

content/get-involved.mdx

@@ -0,0 +1,85 @@
+**Everyone at the University of Waterloo is welcome to come to our events and to
+use our resources!** Feel free to join our communities and chat with our
+members. However, if you wanted to officially become a member or support our
+vision of creating a supportive environment for all computing students, there's
+a bunch of ways you can join and help out.
+
+## How to Join
+
+### General Membership
+
+<details>
+  <summary>In-person Term</summary>
+
+1. Drop by our office in **MC 3036/3037** with
+    - your WatCard, and
+    - $2 for term that you would like to pay for
+2. Sign our [Machine Usage Agreement](https://csclub.uwaterloo.ca/services/machine_usage) 
+
+That's all! After your account created, you'll have access to all the
+[services](https://csclub.uwaterloo.ca/services/) available to members.
+
+#### Membership Renewal
+
+If you are already a member of the CSC and want to renew your membership, you
+can do so by coming in person to our office.
+
+</details>
+
+<details>
+  <summary>Online Term</summary>
+
+Email the CSC Systems Committee at
+[syscom@csclub.uwaterloo.ca](mailto:syscom@csclub.uwaterloo.ca) from your
+University of Waterloo email address with the following:
+
+1. a scan or photograph copy of your **WatCard**,
+2. your **WatIAM userid**, and
+3. your acknowledgement of having read, understood, and agreeing with our 
+[Machine Usage Agreement](https://csclub.uwaterloo.ca/services/machine_usage).
+
+#### Membership Renewal
+
+For this online term, you do not need to pay the $2 fee to renew your
+membership. We have extended the memberships of all members who had already
+previously paid for membership or have joined CS Club during an online term.
+
+</details>
+
+### Executive Committees
+
+Are you interested in using your skills to get involved with CSC? We have
+committees covering everything from design to development, so no matter your
+interests, we’ve got a place for you.
+
+**CSC hires at the end of every term**, so make sure to stay connected through 
+social media to keep up to date on when applications open!
+
+#### Programme Committee
+
+- In charge of planning, advertising, and running all events hosted by CSC.
+- Voices concerns/ideas on behalf of the CS community.
+
+#### Website Committee
+
+- Creates functional and modern design for the CSC website.
+- Builds and maintains the static website, updating content for events and news.
+
+#### Systems Committee
+
+- Maintaining all services that CSC provides which includes file share, DNS,
+mail, configuration for IRC, Mattermost, Git hosting.
+- Managing mirrors used by large public organizations and 1000s of people
+internationally.
+
+### Elected Roles
+Each term the CSC holds elections to determine the executive council.
+
+- President
+- Vice-President
+- Assistant Vice-President
+- Treasurer
+
+To find out when and where the next elections will be held, keep an eye on on the [News](/).
+
+For details on the elections, see the [Constitution](https://csclub.uwaterloo.ca/about/constitution).

pages/_app.css

@@ -13,6 +13,11 @@ body {
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --black: #000000;
+  --grey-1: #c4c4c4;
+  --grey-1-24: #c4c4c440;
+  --grey-2: #bbbbbb;
+  --grey-3: #6b6b6b;
+  --red: #9f616a;
   --gradient-blue-green: linear-gradient(
     99.94deg,
     #1481e3 -17.95%,
@@ -77,3 +82,7 @@ h4 {
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
+
+input {
+  font-family: "Poppins", "sans-serif";
+}

pages/about/our-supporters.tsx

@@ -8,10 +8,7 @@ export default function OurSupporters() {
     <>
       <div className={styles.headerContainer}>
         <h1 className={styles.header}>Our Supporters</h1>
-        <Image
-          src="our-supporters/supporters-codey.svg"
-          className={styles.codey}
-        />
+        <Image src="images/our-supporters/codey.svg" className={styles.codey} />
       </div>
       <div className={styles.content}>
         <Content />

pages/get-involved.mdx

@@ -1 +0,0 @@
-# Get Involved page

pages/get-involved.module.css

@@ -0,0 +1,112 @@
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  border-bottom: calc(1rem / 16) solid var(--purple-2);
+}
+
+.headerText h1 {
+  color: var(--purple-2);
+  margin: 0 0 calc(8rem / 16) 0;
+}
+
+.headerText p {
+  color: var(--black);
+  margin: 0 0 calc(22rem / 16) 0;
+}
+
+.codey {
+  align-self: flex-end;
+}
+
+.content {
+  margin-top: calc(32rem / 16);
+}
+
+.content h2 {
+  font-weight: 600;
+  color: var(--blue-2);
+  margin-top: calc(30rem / 16);
+}
+
+.content h3 {
+  font-weight: 600;
+  color: var(--purple-2);
+  margin-top: calc(30rem / 16);
+  margin-bottom: 1rem;
+}
+
+.content h4 {
+  margin-bottom: 0;
+}
+
+.content h4 + * {
+  margin-top: calc(8rem / 16);
+}
+
+.content strong {
+  font-weight: 600;
+}
+.content details > * {
+  padding-left: 1rem;
+}
+
+.content details > summary {
+  padding-left: 0;
+}
+
+.content details ol {
+  padding-left: 2rem;
+}
+
+.connectWithUs {
+  margin-bottom: calc(21rem / 16);
+}
+
+.emailSignup {
+  margin-bottom: calc(58rem / 16);
+}
+
+.pageContainer {
+  margin-top: calc(50rem / 16);
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .headerContainer {
+    display: flex;
+    flex-direction: column-reverse;
+    align-content: center;
+    border-bottom: none;
+  }
+
+  .headerText {
+    margin-top: calc(6rem / 16);
+    text-align: center;
+  }
+
+  .headerText h1 {
+    color: var(--purple-2);
+    font-size: calc(24rem / 16);
+    margin-bottom: (12rem / 16);
+  }
+
+  .headerText p {
+    margin: 0;
+  }
+
+  .codey {
+    align-self: center;
+    height: calc(62rem / 16);
+  }
+
+  .content h2 {
+    font-size: calc(24rem / 16);
+  }
+
+  .connectWithUs {
+    margin-bottom: calc(46rem / 16);
+  }
+
+  .emailSignup {
+    margin-bottom: calc(104rem / 16);
+  }
+}

pages/get-involved.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Image } from "../components/Image";
+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>
+          <p>
+            If you’re interested in helping out with CS Club, don’t hesitate to
+            get in touch with us!
+          </p>
+        </div>
+        <Image src="images/get-involved/codey.svg" className={styles.codey} />
+      </div>
+      <main className={styles.content}>
+        <Content />
+      </main>
+      <div className={styles.connectWithUs}>
+        <ConnectWithUs />
+      </div>
+      <div className={styles.emailSignup}>
+        <EmailSignup />
+      </div>
+    </div>
+  );
+}

pages/playground.mdx

@@ -9,6 +9,8 @@ import {
   OrganizedContentDemo,
   ButtonDemo,
 } from "../components/playground";
+import { ConnectWithUs } from "../components/ConnectWithUs"
+import { EmailSignup } from "../components/EmailSignup"
 
 import { TeamMemberCard } from "../components/TeamMemberCard";
 
@@ -90,3 +92,19 @@ The `<Link />` component is used on various pages such as Meet the Team! and Our
 <LinkDemo />
 
 ---
+
+## `<ConnectWithUs />`
+
+The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!
+
+<ConnectWithUs />
+
+---
+
+## `<EmailSignup />`
+
+The `<EmailSignup />` component is used on various pages such as the About page and the Get Involved Page!
+
+<EmailSignup />
+
+---

public/images/get-involved/codey.svg

@@ -0,0 +1,41 @@
+<svg width="342" height="174" viewBox="0 0 342 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M295.871 229.088C321.46 229.088 342.204 206.33 342.204 178.257C342.204 150.183 321.46 127.425 295.871 127.425C270.282 127.425 249.538 150.183 249.538 178.257C249.538 206.33 270.282 229.088 295.871 229.088Z" fill="#1482E3"/>
+<path d="M128.435 210.22L81.3427 239.931C81.3427 239.931 28.9207 149.295 30.017 146.535C31.1133 143.775 55.3009 127.688 59.4494 127.966C61.7443 128.12 85.0371 156.121 102.102 179.276C120.846 199.99 128.435 210.22 128.435 210.22Z" fill="#1482E3"/>
+<path d="M105.902 15.55C105.902 15.55 119.431 21.7347 126.112 28.2293C135.623 37.4752 142.3 58.0888 142.3 58.0888L93.0882 70.0494C93.0882 70.0494 90.4332 48.5571 94.6398 35.8784C97.4978 27.2646 105.902 15.55 105.902 15.55Z" fill="#5CAFF9"/>
+<path d="M108.883 28.2602C108.883 28.2602 118.443 32.0262 123.104 36.1123C129.739 41.9292 134.151 55.1513 134.151 55.1513L98.7769 63.7487C98.7769 63.7487 97.2544 49.8879 100.481 41.6105C102.674 35.9869 108.883 28.2602 108.883 28.2602Z" fill="white"/>
+<path d="M192.37 15.55C192.37 15.55 178.841 21.7347 172.16 28.2293C162.649 37.4752 155.972 58.0888 155.972 58.0888L205.183 70.0494C205.183 70.0494 207.839 48.5571 203.632 35.8784C200.774 27.2646 192.37 15.55 192.37 15.55Z" fill="#5CAFF9"/>
+<path d="M188.744 28.54C188.744 28.54 178.477 32.9036 173.441 37.5574C166.27 44.1828 161.37 59.0921 161.37 59.0921L199.041 68.2478C199.041 68.2478 200.863 52.662 197.532 43.4128C195.269 37.1289 188.744 28.54 188.744 28.54Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M206.707 281.54C194.414 294.081 197.934 303.483 169.467 292.512C169.467 292.512 63.7555 263.272 69.5487 168.357C70.6882 161.127 71.732 154.182 72.7322 147.527C83.1822 77.9977 88.8697 40.1552 149.169 40.1552C199.049 40.1552 214.362 78.5045 230.059 117.814C234.933 130.019 239.843 142.316 245.837 153.587C281.324 166.674 299.916 194.206 299.916 226.834C299.916 269.044 206.707 281.54 206.707 281.54Z" fill="#5CAFF9"/>
+<path d="M141.131 205.936C144.887 260.052 173.969 310.506 125.77 290.409C113.53 289.469 95.7057 260.052 91.9496 205.936C88.1936 151.819 99.2616 103.39 134.308 100.957C153.356 99.6356 174.675 111.134 169.248 143.733C166.567 159.84 139.863 187.676 141.131 205.936Z" fill="white"/>
+<path opacity="0.2" d="M97.9378 122.927C116.57 122.927 131.675 107.822 131.675 89.189C131.675 70.5563 116.57 55.4515 97.9378 55.4515C79.3051 55.4515 64.2003 70.5563 64.2003 89.189C64.2003 107.822 79.3051 122.927 97.9378 122.927Z" fill="#FDF8F5"/>
+<path opacity="0.2" d="M173.514 121.129C192.146 121.129 207.251 106.024 207.251 87.3911C207.251 68.7584 192.146 53.6536 173.514 53.6536C154.881 53.6536 139.776 68.7584 139.776 87.3911C139.776 106.024 154.881 121.129 173.514 121.129Z" fill="#FDF8F5"/>
+<path d="M97.9378 121.326C115.687 121.326 130.075 106.938 130.075 89.1887C130.075 71.4398 115.687 57.0514 97.9378 57.0514C80.1888 57.0514 65.8005 71.4398 65.8005 89.1887C65.8005 106.938 80.1888 121.326 97.9378 121.326Z" stroke="#2A2A62" stroke-width="3.20051"/>
+<path d="M173.516 119.528C191.265 119.528 205.653 105.14 205.653 87.3909C205.653 69.642 191.265 55.2536 173.516 55.2536C155.767 55.2536 141.378 69.642 141.378 87.3909C141.378 105.14 155.767 119.528 173.516 119.528Z" stroke="#2A2A62" stroke-width="3.20051"/>
+<path d="M127.806 97.1955C127.806 97.1955 132.82 95.8334 136.092 95.8334C139.364 95.8334 144.377 97.1955 144.377 97.1955V102.644C144.377 102.644 139.344 101.736 136.092 101.736C132.84 101.736 127.806 102.644 127.806 102.644V97.1955Z" fill="#2A2A62"/>
+<path d="M156.156 125.271C157.512 139.74 139.88 142.996 128.306 140.644C116.732 138.203 112.663 124.548 114.471 115.958C116.28 107.367 127.04 102.394 138.614 104.835C143.949 107.277 144.853 109.899 148.018 113.155C151.725 116.862 152.901 119.574 156.156 125.271Z" fill="white"/>
+<path d="M130.843 114.873C135.588 114.873 139.433 112.444 139.433 109.447C139.433 106.451 135.588 104.021 130.843 104.021C126.099 104.021 122.253 106.451 122.253 109.447C122.253 112.444 126.099 114.873 130.843 114.873Z" fill="#2A2A62"/>
+<path d="M135.202 127.849C129.42 125.582 126.048 128.382 125.566 128.382L130.063 134.031L135.202 127.849Z" fill="#FFB8B8"/>
+<path d="M125.566 128.248C126.993 127.4 131.048 126.114 135.845 127.753" stroke="#2A2A62" stroke-width="3.40511" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M155.798 132.054C153.538 134.224 150.463 135.942 147.57 137.208C143.772 138.926 140.155 140.463 135.363 139.921C123.156 138.383 115.47 129.522 116.374 119.394C117.007 111.979 122.885 106.282 130.661 104.383C120.172 104.202 114.023 110.984 113.119 121.021C112.124 131.873 121.167 142 133.374 143.538C143.41 144.804 152.362 139.921 155.798 132.054Z" fill="#2A2A62"/>
+<path d="M130.845 114.872C130.845 114.872 130.393 128.165 143.685 122.558" stroke="#2A2A62" stroke-width="3.20051" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M130.846 112.975C130.846 112.975 130.846 128.077 119.724 120.933" stroke="#2A2A62" stroke-width="3.20051" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M137.268 124.004C137.268 124.004 130.576 146.159 122.89 122.919" stroke="#2A2A62" stroke-width="3.20051" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M116.382 106.728C120.357 106.728 123.579 103.103 123.579 98.6312C123.579 94.1593 120.357 90.5342 116.382 90.5342C112.407 90.5342 109.184 94.1593 109.184 98.6312C109.184 103.103 112.407 106.728 116.382 106.728Z" fill="#2A2A62"/>
+<path d="M115.357 87.2323C119.261 87.979 122.804 86.6062 123.271 84.166C123.738 81.7259 120.951 79.1424 117.047 78.3957C113.143 77.6491 109.599 79.0219 109.133 81.462C108.666 83.9021 111.453 86.4856 115.357 87.2323Z" fill="white"/>
+<path d="M166.347 87.6025C162.443 88.3492 158.899 86.9764 158.433 84.5362C157.966 82.0961 160.753 79.5126 164.657 78.7659C168.561 78.0192 172.104 79.392 172.571 81.8322C173.038 84.2723 170.251 86.8558 166.347 87.6025Z" fill="white"/>
+<path d="M68.926 27.4559L76.42 49.5517C76.7134 50.4168 77.6248 50.9087 78.509 50.6792C79.3698 50.4558 79.9244 49.6204 79.7962 48.7404L76.4319 25.6522C76.076 23.209 73.557 21.717 71.2434 22.5789C69.2794 23.3106 68.2528 25.4711 68.926 27.4559Z" fill="#4ED4B2"/>
+<path d="M46.7521 40.3858L64.8381 55.1264C65.5462 55.7035 66.5795 55.6362 67.2068 54.9721C67.8174 54.3256 67.8437 53.3232 67.2677 52.6457L52.1537 34.8706C50.5544 32.9896 47.6276 33.0635 46.1252 35.0227C44.8497 36.6858 45.1275 39.0616 46.7521 40.3858Z" fill="#4ED4B2"/>
+<path d="M36.285 61.9558L59.1522 66.59C60.0475 66.7714 60.931 66.231 61.1773 65.3514C61.417 64.4951 60.9738 63.5955 60.1487 63.2638L38.5006 54.5608C36.2098 53.6399 33.6534 55.0669 33.235 57.5002C32.8797 59.5657 34.2308 61.5395 36.285 61.9558Z" fill="#4ED4B2"/>
+<path d="M157.359 101.326C160.349 97.28 168.779 91.6149 178.575 101.326" stroke="#2A2A62" stroke-width="3.40511" stroke-linecap="round"/>
+<g opacity="0.25">
+<path opacity="0.25" d="M268.97 52.49H291.97" stroke="#1482E3" stroke-width="3.19889" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.25" d="M280.458 64.0015V41.0015" stroke="#1482E3" stroke-width="3.19889" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="342" height="174" fill="white"/>
+</clipPath>
+</defs>
+</svg>