components/Bubble.module.css

@@ -0,0 +1,7 @@
+.bubble {
+  padding: calc(36rem / 16) 0;
+}
+
+.bubble:nth-child(odd) {
+  background-color: var(--blue-1-20);
+}

components/Bubble.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { DefaultLayout } from "./DefaultLayout";
+import styles from "./Bubble.module.css";
+
+export default function Bubble(props: { children: React.ReactNode }) {
+  return (
+    <div className={styles.bubble}>
+      <DefaultLayout>{props.children}</DefaultLayout>
+    </div>
+  );
+}

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/DefaultLayout.module.css

@@ -0,0 +1,6 @@
+.defaultLayout {
+  margin: 0 auto;
+  max-width: calc(800rem / 16);
+  padding: 0 calc(20rem / 16);
+  padding-bottom: calc(20rem / 16);
+}

components/DefaultLayout.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "./DefaultLayout.module.css";
+
+export function DefaultLayout(props: { children: React.ReactNode }) {
+  return <div className={styles.defaultLayout}>{props.children}</div>;
+}

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/about/index.mdx

@@ -0,0 +1,89 @@
+import Bubble from "./../../components/Bubble";
+
+<Bubble>
+
+CS Club is working towards bridging the gap between each and every CS student,
+to support their undergraduate experience and to provide a community that
+students can belong to and identify with. With hundreds of CS students joining
+Waterloo every year, CS Club aims to run events that encourage students to
+connect and socialize, to increase technical and academic interest with
+workshops and talks, and to provide a safe environment for academic learning and
+growth.
+
+</Bubble>
+
+<Bubble>
+
+## Our <span>Vision</span>
+
+1. Academic: Promoting the knowledge and interest of Computer Science, as well
+as supporting students throughout their academic experiences.
+
+2. Career: Providing career guidance and resources to help students gain
+experience and knowledge for their own job search.
+
+3. Community: Encouraging interpersonal relationships through community building
+and social events for all computing students.
+
+</Bubble>
+
+<Bubble>
+
+## Our <span>Story</span>
+
+We are students ourselves, coming from all computing backgrounds —
+Computer Science, Software Engineering, CFM, Mechatronics Engineering, and more.
+CS Club was born from an unfulfilled need; we felt that although there are so
+many students at UW that are interested in CS, there wasn't a proper support
+network in place. We lacked the cohorts provided to engineers, and we felt
+disconnected from one another.
+
+By recreating what CS Club means for our community, we're passionate about
+helping students redefine their university experience here at Waterloo.
+
+</Bubble>
+
+<Bubble>
+
+## Our <span>Mission</span>
+
+The CS Club team is devoted to providing you with all the resources you could
+need as a student. We want to create a community that members can call home, to
+make it a place where you can reach out for career advice, for academic help, or
+even just to socialize. To fulfil this mission, we'll be running events and
+initiatives throughout the term, so please check out our [Events](/events/current)
+page to stay updated!
+
+</Bubble>
+
+<Bubble>
+
+## Our <span>Office</span>
+
+The CS Club office is located at room **MC 3036/3037**, in the Math & Computer
+Building of the University of Waterloo.
+
+- An office favorite is our $0.50 pop for members. We have a fridge in the
+office which is stocked with many different kinds of pop.
+- We have lots of informative books, 5 computer terminals, and an array of
+knowledgeable people to talk to.
+
+Come visit us on campus in our office! Meet new members and find out what's new
+in the club.
+
+<address>
+
+Computer Science Club <br />
+Math & Computer 3036/3037 <br />
+University of Waterloo <br />
+200 University Avenue West <br />
+Waterloo, ON  N2L 3G1 <br />
+Canada
+
+Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870)
+
+</address>
+
+</Bubble>
+
+

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%,
@@ -83,3 +88,7 @@ h4 {
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
+
+input {
+  font-family: "Poppins", "sans-serif";
+}

pages/_app.module.css

@@ -10,10 +10,3 @@
 .contentContainer {
   flex-grow: 1;
 }
-
-.defaultLayout {
-  margin: 0 auto;
-  max-width: calc(800rem / 16);
-  padding: 0 calc(20rem / 16);
-  padding-bottom: calc(20rem / 16);
-}

pages/_app.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { Link } from "../components/Link";
+import { DefaultLayout } from "../components/DefaultLayout";
 import styles from "./_app.module.css";
 
 import "./_app.css";
@@ -32,10 +33,6 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
   );
 }
 
-function DefaultLayout(props: { children: React.ReactNode }) {
-  return <div className={styles.defaultLayout}>{props.children}</div>;
-}
-
 type PageComponent = NextComponentType<
   NextPageContext,
   unknown,

pages/about/index.mdx

@@ -1 +0,0 @@
-# About Us page

pages/about/index.module.css

@@ -0,0 +1,102 @@
+.title {
+  color: var(--purple-2);
+  font-size: calc(48rem / 16);
+  height: calc(80rem / 16);
+  margin-top: auto;
+  padding-left: calc(20rem / 16);
+}
+
+.content {
+  color: black;
+  background-color: white;
+}
+
+.content h2 {
+  color: var(--purple-2);
+  font-weight: 600;
+}
+
+.content span {
+  color: var(--blue-2);
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-width: calc(800rem / 16);
+  margin: 0 auto;
+  overflow-y: clip;
+  overflow-x: clip;
+  height: calc(200rem / 16);
+}
+
+.codey {
+  transform: rotate(1.91deg);
+  z-index: -1;
+  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;
+    flex-direction: column;
+    align-items: center;
+    max-width: calc(800rem / 16);
+    margin: 0 auto;
+    overflow-y: clip;
+    height: calc(130rem / 16);
+  }
+
+  .title {
+    font-size: calc(24rem / 16);
+    font-weight: 600;
+    padding-left: calc(0rem / 16);
+  }
+
+  .content h2 {
+    font-size: calc(24rem / 16);
+  }
+
+  .content ul {
+    padding-left: calc(20rem / 16);
+  }
+
+  .content ol {
+    padding-left: calc(16rem / 16);
+  }
+
+  .codey {
+    width: calc(140.21rem / 16);
+    height: calc(124.65rem / 16);
+    padding-left: calc(30rem / 16);
+  }
+}

pages/about/index.tsx

@@ -0,0 +1,43 @@
+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";
+
+export default function AboutUs() {
+  return (
+    <>
+      <div className={styles.titleContainer}>
+        <h1 className={styles.title}>About Us!</h1>
+        <Image src="/about/codey.svg" className={styles.codey} />
+      </div>
+      <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>
+    </>
+  );
+}
+
+AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
+  return <div>{props.children}</div>;
+};

pages/about/our-supporters.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Image } from "../../components/Image";
-import Content from "../../content/our-supporters.mdx";
+import Content from "../../content/about/our-supporters.mdx";
 import styles from "./our-supporters.module.css";
 
 export default function OurSupporters() {
@@ -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/about/codey.svg

@@ -0,0 +1,38 @@
+<svg width="426" height="382" viewBox="0 0 426 382" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M113.558 10.8628C113.558 10.8628 129.8 18.9517 137.681 27.1402C148.899 38.7976 156.201 64.1977 156.201 64.1977L95.7251 76.7795C95.7251 76.7795 93.3614 50.4717 99.0044 35.1866C102.838 24.8021 113.558 10.8628 113.558 10.8628Z" fill="#5CAFF9"/>
+<path d="M116.672 26.4829C116.672 26.4829 128.173 31.4622 133.689 36.6325C141.541 43.9931 146.382 60.2906 146.382 60.2906L102.911 69.3346C102.911 69.3346 101.618 52.3758 105.888 42.4163C108.789 35.65 116.672 26.4829 116.672 26.4829Z" fill="white"/>
+<path d="M218.963 14.3746C218.963 14.3746 202.219 21.3645 193.811 29.0104C181.842 39.8953 172.865 64.7529 172.865 64.7529L232.37 81.3321C232.37 81.3321 236.479 55.2399 231.866 39.6132C228.732 28.9965 218.963 14.3746 218.963 14.3746Z" fill="#5CAFF9"/>
+<path d="M214.018 30.0666C214.018 30.0666 201.325 34.9691 194.996 40.4378C185.986 48.2231 179.407 66.1992 179.407 66.1992L224.958 78.8904C224.958 78.8904 227.812 59.9647 224.127 48.5541C221.623 40.8019 214.018 30.0666 214.018 30.0666Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M225.972 329.248C212.324 337.127 196.902 341.216 180.143 340.658C117.755 338.579 52.4242 301.928 63.2107 190.376C64.8835 181.907 66.4285 173.77 67.9089 165.973C83.3761 84.5078 91.7944 40.1695 165.302 42.6186C226.107 44.6444 243.27 90.4325 260.863 137.367C266.325 151.939 271.828 166.622 278.692 180.139C321.442 196.993 343.027 230.174 341.747 268.604C340.09 318.317 297.986 329.944 225.972 329.248Z" fill="#5CAFF9"/>
+<path d="M119.093 217.606L143.895 264.073C143.895 264.073 29.5229 320.806 26.5712 319.808C23.6196 318.81 9.93068 294.977 11.0696 290.766C11.6996 288.437 48.4349 263.725 78.3802 245.514C105.854 225.702 119.093 217.606 119.093 217.606Z" fill="#5CAFF9"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="57" y="39" width="292" height="307">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M225.458 329.231C211.811 337.11 196.389 341.199 179.629 340.641C117.241 338.562 51.9105 301.911 62.697 190.359C64.3698 181.89 65.9148 173.753 67.3952 165.956C82.8624 84.4907 91.2807 40.1524 164.788 42.6015C225.594 44.6273 242.756 90.4154 260.349 137.35C265.811 151.922 271.315 166.605 278.179 180.123C320.927 196.977 342.512 230.158 341.232 268.587C339.575 318.3 297.472 329.926 225.458 329.231Z" fill="#5CAFF9"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M148.762 244.382C151.143 310.505 184.546 373.192 126.606 346.736C111.723 345.093 91.1894 308.507 88.8085 242.385C86.4277 176.263 101.887 117.674 144.708 116.133C167.983 115.295 193.505 130.178 185.565 169.697C181.642 189.224 147.959 222.071 148.762 244.382Z" fill="white"/>
+</g>
+<ellipse cx="332.275" cy="170.962" rx="56.5131" ry="61.9998" transform="rotate(-33.1205 332.275 170.962)" fill="#5CAFF9"/>
+<circle cx="100.864" cy="100.31" r="38.6503" transform="rotate(1.9082 100.864 100.31)" stroke="#2A2A62" stroke-width="5"/>
+<circle cx="193.063" cy="101.185" r="38.6503" transform="rotate(1.9082 193.063 101.185)" stroke="#2A2A62" stroke-width="5"/>
+<path d="M136.178 111.367C136.178 111.367 142.869 109.943 147.2 110.088C151.531 110.232 158.112 112.098 158.112 112.098L157.893 118.679C157.893 118.679 151.267 117.36 146.962 117.216C142.658 117.073 135.958 117.948 135.958 117.948L136.178 111.367Z" fill="#2A2A62"/>
+<path d="M271.308 310.166L248.723 247.836C248.723 247.836 266.785 228.637 291.656 225.035C316.528 221.432 337.339 234.08 337.339 234.08C337.339 234.08 409.514 272.235 410.266 274.836C411.018 277.438 403.593 303.893 400.692 306.333C399.087 307.683 370.785 307.246 347.056 302.087C301.614 341.156 271.308 310.166 271.308 310.166Z" fill="#5CAFF9"/>
+<path d="M172.509 270.177L200.515 322.647C200.515 322.647 110.607 365.763 107.931 364.286C105.254 362.809 90.0591 335.757 90.4265 331.493C90.6297 329.134 118.568 308.459 141.621 293.638C162.323 276.776 172.509 270.177 172.509 270.177Z" fill="#5CAFF9"/>
+<g clip-path="url(#clip0)">
+<path d="M170.825 144.56C171.865 161.827 150.758 165.001 137.081 161.745C123.408 158.381 119.112 141.868 121.6 131.827C124.092 121.679 137.091 116.189 150.765 119.552C157.015 122.668 157.987 125.824 161.623 129.822C165.887 134.38 167.178 137.654 170.825 144.56Z" fill="white"/>
+<path d="M141.115 131.186C146.759 131.374 151.431 128.637 151.55 125.072C151.669 121.507 147.19 118.465 141.545 118.277C135.901 118.089 131.229 120.826 131.11 124.391C130.991 127.956 135.471 130.998 141.115 131.186Z" fill="#2A2A62"/>
+<path d="M170.128 152.613C167.352 155.105 163.626 157.027 160.134 158.419C155.547 160.312 151.183 161.998 145.503 161.162C131.041 158.849 122.248 148.002 123.833 135.993C124.879 127.196 132.098 120.652 141.425 118.701C128.953 118.07 121.369 125.895 119.895 137.8C118.282 150.67 128.638 163.077 143.1 165.39C154.884 167.29 165.728 161.836 170.128 152.613Z" fill="#2A2A62"/>
+<path d="M131.13 95.2212C132.088 92.4076 129.216 88.8838 124.714 87.3506C120.212 85.8173 115.786 86.8552 114.828 89.6688C113.87 92.4824 116.742 96.0063 121.244 97.5395C125.746 99.0728 130.172 98.0348 131.13 95.2212Z" fill="white"/>
+<path d="M178.486 100.648C183.082 99.4252 186.188 96.1051 185.424 93.2326C184.66 90.3602 180.314 89.023 175.718 90.246C171.122 91.469 168.016 94.7891 168.781 97.6615C169.545 100.534 173.89 101.871 178.486 100.648Z" fill="white"/>
+<path opacity="0.5" d="M140.954 136.026L148.317 144.564L139.384 154.067L131.825 141.753L140.954 136.026Z" fill="#5CAFF9"/>
+<path d="M141.114 131.184C141.114 131.184 140.05 146.98 156.086 140.837" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M141.191 128.926C141.191 128.926 140.593 146.892 127.644 137.953" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M148.396 142.197C148.396 142.197 139.557 168.289 131.334 140.337" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M164.211 111.417C162.945 114.669 165.931 117.715 168.068 115.36C169.668 113.679 171.77 112.363 174.34 112.448C176.782 112.53 178.792 113.983 180.276 115.766C182.258 118.086 185.189 115.063 184.136 111.908C183.545 110.328 182.703 108.566 181.464 107.138C175.644 100.357 167.795 104.256 164.905 109.88C164.631 110.391 164.357 110.902 164.211 111.417Z" fill="#2A2A62"/>
+<path d="M110.422 109.625C109.156 112.877 112.142 115.923 114.279 113.568C115.879 111.887 117.981 110.571 120.551 110.656C122.993 110.738 125.003 112.191 126.487 113.974C128.469 116.294 131.4 113.271 130.347 110.116C129.756 108.536 128.914 106.774 127.675 105.346C121.855 98.5649 114.005 102.464 111.116 108.088C110.842 108.599 110.568 109.11 110.422 109.625Z" fill="#2A2A62"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="74.8087" height="78.1455" fill="white" transform="translate(110.945 86.3469) rotate(1.9082)"/>
+</clipPath>
+</defs>
+</svg>

public/about/hotdog.svg

@@ -0,0 +1,3 @@
+<svg width="1314" height="247" viewBox="0 0 1314 247" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="-548" y="0.188721" width="1862" height="246" rx="123" fill="#E1EEFA"/>
+</svg>

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>