get involved page + connectwithus

components/ConnectWithUs.module.css

@@ -0,0 +1,17 @@
+.header {
+  color: var(--blue-2);
+  font-weight: 600;
+  margin: 0 0 calc(11rem / 16) 0;
+}
+
+.text {
+  margin: 0;
+}
+
+.socialLinks {
+  margin: calc(36rem / 16) calc(-10rem / 16);
+}
+
+.socialLinks > * {
+  justify-content: left;
+}

components/ConnectWithUs.tsx

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

content/get-involved.mdx

@@ -0,0 +1,17 @@
+## How to Join
+
+### General Members
+
+Simply drop by our office in MC 3036/3037 with some identification (WatCard, driver's license, etc.) and $2 per term that 
+you would like to pay for. We'll have you sign our [machine usage agreement](/resources/services/) and after your account on our systems is created 
+you'll have access to all the services available to members. 
+
+### Executive Roles
+
+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 beginning of every term, so make sure to stay connected 
+through social media to keep up to date on when applications open!
+
+### Elected Seats
+Each term the CSC holds elections to determine the executive council. To find out when and where the next elections will be held, 
+check the [homepage](/)<!-- and the [uw.csc](https://csclub.uwaterloo.ca/newsgroup/thread.php?group=uw.csc) newsgroup-->. For details on the elections, see the constitution.

pages/get-involved.mdx

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

pages/get-involved.module.css

@@ -0,0 +1,45 @@
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  border-bottom: calc(1rem / 16) solid var(--purple-2);
+}
+
+.headerText h1 {
+  color: var(--purple-2);
+  margin: 0 0 0.5rem 0;
+}
+
+.headerText p {
+  color: var(--black);
+  margin: 0 0 1.375rem 0;
+}
+
+.codey {
+  align-self: flex-end;
+  justify-self: end;
+}
+
+.content {
+  margin-top: calc(32rem / 16);
+  margin-bottom: calc(52.77rem / 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: calc(15rem / 16);
+}
+
+.content p {
+  margin: 0;
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+}

pages/get-involved.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Image } from "../components/Image";
+import { Link } from "../components/Link";
+import { ConnectWithUs } from "../components/ConnectWithUs";
+import Content from "../content/get-involved.mdx";
+import styles from "./get-involved.module.css";
+
+export default function GetInvolved() {
+  return (
+    <>
+      <div className={styles.headerContainer}>
+        <div className={styles.headerText}>
+          <h1>Get Involved!</h1>
+          <p>
+            If you’re interested in holding, planning, or helping out with an
+            event, don’t hesitate to get in touch with the{" "}
+            <Link href="/about/team">Programme Committee</Link>!
+          </p>
+        </div>
+        {/* FIX CODEY SINCE ITS NOT SVG */}
+        <Image src="images/get-involved-codey.svg" className={styles.codey} />
+      </div>
+      <div className={styles.content}>
+        <Content />
+      </div>
+      <ConnectWithUs />
+    </>
+  );
+}